Scroll Animation Techniques for Modern Websites

Scroll animations transform passive reading into interactive storytelling. Here is how to master them.

GSAP ScrollTrigger Basics

ScrollTrigger connects any GSAP animation to scroll position. The key properties are trigger, start, end, and scrub.

Image Sequence Animation

The technique Apple uses: extract video frames, load them as images, and draw them on a canvas controlled by scroll position.

Steps: 1. Generate your cinematic video 2. Extract frames at 24fps 3. Preload images into an array 4. Use GSAP to animate a frame index 5. Draw the current frame on canvas

Performance Tips

- Compress frames to WebP - Use requestAnimationFrame - Preload critical frames first - Implement progressive loading - Cap device pixel ratio at 2

The Result

A premium, Apple-quality experience that feels magical to users and performs well on all devices.