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.

Secondary Action: Fade + slide + scale can combine for richer reveals.

Timing:

• Reveal animation: 400-600ms (allows scroll to continue)

• Parallax: real-time, 1:1 or fractional ratios

• Sticky transitions: 200-300ms

Exaggeration: Subtle for scroll - users control the pace. Let scroll speed be the exaggeration.

Solid Drawing: Elements should never jump or teleport. Smooth interpolation at all scroll positions.

Appeal: Scroll animations should reward exploration, not obstruct it.

Timing Recommendations

Scroll Animation Duration Trigger Point Easing

Fade In 500ms 20% visible ease-out

Slide Up 600ms 15% visible ease-out

Parallax real-time continuous linear

Sticky Header 200ms threshold ease-out

Progress Bar real-time continuous linear

Section Reveal 600ms 25% visible ease-out

Implementation Patterns

/* Scroll-triggered reveal */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity 500ms ease-out, transform 600ms ease-out; }

.reveal.visible { opacity: 1; transform: translateY(0); }

/* CSS-only parallax */ .parallax-container { perspective: 1px; overflow-y: auto; }

.parallax-slow { transform: translateZ(-1px) scale(2); }

Intersection Observer Pattern

const observer = new IntersectionObserver( (entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('visible'); } }); }, { threshold: 0.2, rootMargin: '0px 0px -10% 0px' } );

document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

Scroll-Linked Animation (CSS)

@keyframes reveal { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

.scroll-reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 50%; }

Key Rules

• Never block scroll or hijack scroll behavior

• Animations should complete within viewport, not require precise scroll position

• Trigger early (10-20% visible) so animation completes before full view

• Provide prefers-reduced-motion alternative - instant reveals, no parallax

• Test on mobile - scroll animations must be smooth at 60fps