GSAP Scroll-Synced Video with Timed Cues

Synchronized video playback using GSAP and ScrollTrigger, combined with cue-based headings that animate in and out based on defined video timecodes.

Encoding Matters

Smooth scroll-based playback depends heavily on how the video is encoded. Accurate frame seeking requires frequent keyframes and fast metadata access. Without proper settings, playback can become inconsistent, particularly on devices with limited resources.

When preparing videos for scroll-driven playback, ffmpeg offers a flexible and widely supported encoding approach. The settings below serve as a reliable starting point, but adjustments may be needed depending on the target resolution, performance requirements, or playback context.

Recommended FFmpeg Settings

ffmpeg -i input.mp4 -vf "format=yuv420p,scale=-1:1080" \
    -c:v libx264 -profile:v main -level:v 5.1 -crf 20 \
    -preset slow -tune animation -movflags +faststart \
    -keyint_min 6 -g 6 -an output_scrub.mp4

• -keyint_min 6 -g 6: Forces a keyframe every 6 frames, enabling accurate frame seeking.
• -movflags +faststart: Places metadata at the beginning for immediate loading.
• -crf 20: Balances quality and file size. Lower values improve fidelity but increase size.
• -preset slow: Enhances compression efficiency by extending encoding time.
• -format yuv420p: Ensures playback compatibility across all major browsers.
• -an: Removes audio to reduce file size and avoid unnecessary overhead.

Performance Notes

How well scrubbing works can vary depending on the device, browser, and how the video was encoded. These tips can help improve playback, especially on less powerful hardware:

• Stick to a moderate resolution like 1080p, and keep the framerate around 30 fps or lower.
• Use frequent keyframes with -g and -keyint_min to make seeking smoother.
• Check performance across different browsers and devices, support for formats and playback behavior isn’t always consistent.
• If video playback feels unreliable, it may be worth switching to sprite-based or image sequence alternatives.

Resources

• Video source: Mixkit – Slow aerial tour through a mist-covered forest
• Video encoder script: Encode ScrubVideo (.ps1)
• Related discussion: GSAP Forum – Video scroll animation and performance tips
• [V2] GSAP Scroll-Synced Video with Timed Cues and Keyhole Effect