Skip to main content
The historical timeline traces the journey of Shree Swaminarayan Temple Secaucus from Jeevanpran Shree Muktajeevan Swamibapa’s first visit to the USA in 1970 through the Rajat Mahotsav celebrations in 2026. On desktop it renders as a parallax scroll experience powered by GSAP and Locomotive Scroll; on mobile it becomes a vertically stacked swipe-friendly feed.

​
Data source

All milestone data lives in lib/timeline-data.ts as the exported timelineData array. Data structure:
lib/timeline-data.ts
import { getCloudflareImage } from "@/lib/cdn-assets"

const timelineData = [
  {
    year: string,        // Display year label
    title: string,       // Milestone title
    description: string, // Currently empty; reserved for future use
    speed: number,       // Parallax scroll speed: positive scrolls down, negative up
    image: string,       // Full Cloudflare Images URL via getCloudflareImage()
  }
]
The speed property alternates between 3 and -3 across entries, creating a staggered parallax offset as the user scrolls.

​
Milestones (1970–2026)

30 entries spanning 56 years of temple history:
YearMilestone
1970Jeevanpran Shree Muktajeevan Swamibapa’s First Visit to USA
1987Acharya Swamishree Maharaj establishes SSSSM USA
1992Acharya Swamishree Maharaj’s Second Visit to USA
1995Acharya Swamishree Maharaj establishes New Jersey Hari Mandir
1998Secaucus Temple Ground Breaking
1999Acharya Swamishree Maharaj Visits Temple Construction Site
2001Suvarna Tula Murti Pratishtha Opening
2002Muktajeevan Swamibapa Community Hall Opening
2003First Youth Satsang Shibir USA
2004Acharya Swamishree Maharaj Helicopter Arrival
2005Secaucus Temple’s First Health Camp
20065th Patotsav & Rangotsav
2007Shatabdi Mahotsav
2008Buchmuller Park Cultural Program
2009Diwali Annakut
2010Father’s Day Celebration
2011New Jersey Dashabdi Mahotsav
2012Platinum Tula
2013Swamibapa Pipe Band USA 10th Anniversary
2014Flash Mob Welcome Dance
2015One World Trade Center Visit
2016Smruti Mandir Rajat Mahotsav Dance
2017Sadbhav Amrut Parva
2018New Loya Shakotsav
2019Acharya Swamishree Maharaj Final USA Vicharan
2020Acharya Swamishree Maharaj Memorial
202120th Patotsav Celebrations
2022Acharya Swamishree Maharaj Asthi
2023Chandan Darshan
2024Guruparampara Grand Hindolo
2025Acharya Swamiji Maharaj is showered with flower petals
2026Something Extraordinary Awaits…
The 2026 entry uses the R2 CDN logo URL (https://cdn.njrajatmahotsav.com/main_logo.png) rather than a Cloudflare Images ID, as the commemorative photo for the Mahotsav is not yet available.

​
Cloudflare Images integration

Every historical photo is served through Cloudflare Images using the bigger variant: 
export const getCloudflareImage = (imageId: string) =>
  `https://imagedelivery.net/vdFY6FzpM3Q9zi31qlYmGA/${imageId}/bigger?format=auto&quality=90`
This variant automatically negotiates WebP or AVIF delivery and applies 90% quality compression, keeping archival images visually sharp while minimizing bandwidth. To add or replace a timeline photo:
  1. Upload the image to Cloudflare Images
  2. Copy the resulting image ID
  3. Pass it to getCloudflareImage() in the relevant entry in lib/timeline-data.ts

​
Desktop parallax scroll

On desktop the timeline is rendered as a full-page horizontal parallax experience using GSAP and Locomotive Scroll.

GSAP

Handles per-element scroll-linked transforms. Each timeline item’s y offset is driven by its speed value, creating depth as the user scrolls.

Locomotive Scroll

Provides smooth inertia scrolling and exposes scroll progress values that GSAP reads. This combination creates the parallax depth effect.
The speed field in each milestone entry controls how far and in which direction an image travels relative to the scroll position:
  • Positive speed (e.g. 3): image moves downward relative to scroll, appearing to recede
  • Negative speed (e.g. -3): image moves upward relative to scroll, appearing to advance
Alternating between 3 and -3 across adjacent entries creates a staggered two-column visual rhythm.

​
Mobile swipe view

On mobile devices the timeline renders through components/organisms/MobileTimeline.tsx as a vertically stacked list with scroll-triggered fade animations.
An IntersectionObserver (threshold 0.2) watches every [data-timeline-item] element. When an item enters the viewport its index is added to a Set<number> stored in visibleItems state.Items not yet visible use opacity-0 translate-y-8; visible items transition to opacity-100 translate-y-0 over 700ms.
components/organisms/MobileTimeline.tsx
const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const index = parseInt(
          entry.target.getAttribute('data-index') || '0'
        )
        setVisibleItems((prev) => new Set(prev).add(index))
      }
    })
  },
  { threshold: 0.2 }
)
Once an item animates in it stays visible — indices are only ever added to visibleItems, never removed. This prevents items from disappearing when the user scrolls back up.

​
Adding a new milestone

  1. Upload the archival photo to Cloudflare Images and note the image ID.
  2. Open lib/timeline-data.ts.
  3. Insert a new entry in the timelineData array in chronological order:
{
  year: "2027",
  title: "Your milestone title here",
  description: "",
  speed: 3,   // Use -3 if the previous entry used 3, to maintain the alternating pattern
  image: getCloudflareImage("your-cloudflare-image-id")
}
  1. Verify the speed value alternates with the adjacent entries.
  2. Save the file — no other changes are required. Both the desktop parallax and mobile views read from the same array.
Several entries in timelineData are commented out (1987 alternate photo, 1995 alternate photo, 2007 first version). These are preserved as fallback images in case the active image needs to be replaced. Do not delete them.
Replace the getCloudflareImage() call in the relevant entry with the new image ID. The old image ID can be kept as a comment for reference. Cloudflare Images caches by URL, so the update takes effect immediately without a cache purge.

Build docs developers (and LLMs) love

Get started for freeTalk to us