Scroll-Synced Image Slideshow with Cues, Keyhole Reveal, and Track Markers

A scroll-driven image sequence powered by GSAP and ScrollTrigger. Images fade in based on defined cue ranges, with only one image visible at any time.

Cue-based overlay text is synchronized with the current image using data-start and data-end attributes. Only one cue is shown at a time, transitioning based on scroll direction and timing.

Keyhole Reveal

A polygonal clip-path expands during scroll to reveal the slideshow through a central keyhole shape. Four corner elements animate outward in sync. The effect is scroll-driven, reversible, and tied to the slideshow container.

Image Preloading Strategy

• The initial image is resolved based on scroll position and preloaded first.
• Surrounding images are preloaded in interleaved order (+1, -1, +2…).
• Remaining images are preloaded in sequence after the first batch completes.
• Images fade in only when confirmed loaded. No decode() is used.

Preloader Lifecycle

• An overlay is shown until the first image is displayed.
• It is removed after fade-in via a guarded nextTick mechanism.
• Fade animations are skipped while the preloader is active.

Scroll Track and Cue Markers

• Vertical time markers (e.g. 0s, 1s, 2s…) are displayed next to the track.
• Each cue is visualized with labeled markers for start and end points.
• Markers update dynamically based on timeline duration.