Scroll Animations

Apply Disney's 12 principles to scroll-triggered motion.

Principle Application

Squash & Stretch: Elements can compress slightly while scrolling fast, settle when stopped.

Anticipation: Content should be slightly visible before full reveal. Start animations at 10-20% visibility.

Staging: Reveal content in reading order. Top-to-bottom, left-to-right progression.

Straight Ahead vs Pose-to-Pose: Define clear "hidden" and "revealed" poses. Scroll position interpolates between them.

Follow Through & Overlapping: Stagger reveals. First element triggers at 20% viewport, next at 25%, etc.

Slow In/Slow Out: Use ease-out for reveals triggered by scroll. Content settles into place.

Arcs: Parallax elements move on curves relative to scroll. Slight horizontal offset as vertical scroll occurs.