Scroll Animations

A solid foundation for scroll-triggered animations that won't make your users nauseous. It applies Disney's 12 animation principles to web scroll interactions, which sounds gimmicky but actually translates to practical timing guidance: trigger reveals at 20% visibility so they finish before users reach the content, use 400-600ms durations that don't fight scroll momentum, and stagger overlapping elements by 5% intervals. The implementation patterns cover both Intersection Observer and the newer CSS animation-timeline property. Most valuable bit is the timing table with specific thresholds and easing functions, plus the reminder to test prefers-reduced-motion alternatives since scroll animations are easy to overdo.

Install to Claude Code

npx -y skills add dylantarre/animation-principles --skill scroll-animations --agent claude-code