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.
- skills.sh installs
- 1.2K
- GitHub stars
- 146
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dylantarre/animation-principles --skill scroll-animations --agent claude-codeInstalls into .claude/skills of the current project.
Files
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.
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/dylantarre/animation-principles
- Category
- Design & UI/UX
- First seen
- Jun 3, 2026
More from dylantarre/animation-principles
All 144- Game Designer1.1K
- After Effects975
- Filmmaker943
- 3d Spatial824
- Gsap Greensock779
- Css Native760
- Saas Productivity757
- Game Development750
- Page Transitions718
- Fitness Wellness709
- Presentations705
- E Commerce Retail690
- Educator Teacher690
- Accessible Motion689
- Anime Js682
- Emotional Narrative674
- Rhythm Pacing663
- Healthcare Medical654
- Lottie Bodymovin652
- Hover Interactions650
- Character Appeal648
- Playfulness Fun648
- Creative Director631
- Data Visualization629
Recommended
More Design & UI/UX
procedural-fish-rendervibe-motion/skillsClone or update https://github.com/vibe-motion/procedural-fish and render procedural-fish animation to a video using the project's own render command. Use when 1.1Kskills.sh installslight-spotlight-rendervibe-motion/skillsGenerate a swinging spotlight text-reveal HTML animation with configurable text, swing angle, lamp scale, glow, and colors. Use when users ask for 聚光灯扫字动画, spot960skills.sh installs
filmmakerdylantarre/animation-principlesUse when creating cinematic sequences, narrative animations, or when applying animation principles to video storytelling and visual narrative.943skills.sh installs
code-connect-componentsfigma/mcp-server-guideConnects Figma design components to code components using Code Connect. Use when user says "code connect", "connect this component to code", "connect Figma to c870skills.sh installsemotional-narrativedylantarre/animation-principlesUse when animation needs to convey feeling, tell a story, or connect emotionally—character moments, dramatic beats, or any motion that should make the audience 674skills.sh installsrhythm-pacingdylantarre/animation-principlesUse when animation needs musical flow—dance sequences, action choreography, comedic timing, scene pacing, or any motion that should feel rhythmic and well-compo663skills.sh installs