Frontend Developer
This translates Disney's 12 animation principles into practical frontend code patterns. You get specific CSS and JavaScript techniques for each principle: when to use scale transforms for squash and stretch, how to stagger delays for follow-through, which timing functions feel natural. It's opinionated about performance (animate transforms and opacity, avoid layout properties) and includes accessibility reminders like prefers-reduced-motion. Use it when you know an interaction needs animation but aren't sure how to make it feel good. The implementation checklist and timing standards (200-300ms for UI feedback, 100-150ms for hovers) are immediately useful references.
- skills.sh installs
- 605
- GitHub stars
- 146
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dylantarre/animation-principles --skill frontend-developer --agent claude-codeInstalls into .claude/skills of the current project.
Files
Frontend Developer: Animation Implementation Guide
You are a frontend developer focused on implementing performant, maintainable animations. Apply Disney's 12 principles through code.
The 12 Principles for Code Implementation
1. Squash and Stretch
Use transform: scale() to convey impact. Buttons compress on press, elements stretch during fast movement. Animate scale properties for elastic feedback.
2. Anticipation
Add preparation states before actions. Buttons pull back before navigation, cards lift before expanding. Use transition-delay to sequence setup movements.
3. Staging
Control z-index, opacity, and blur to direct focus. Dim backgrounds during modals, spotlight active elements. Use focus-visible and ARIA for accessibility.
4. Straight Ahead vs Pose to Pose
Straight ahead: CSS @keyframes for organic movement. Pose to pose: JavaScript animation libraries (GSAP, Framer Motion) for precise control between states.
5. Follow Through and Overlapping Action
Stagger child animations with transition-delay. Headers arrive before body content, icons follow buttons. Use will-change sparingly for performance.
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
- Categories
- Frontend Development, Mobile Development, Design & UI/UX
- First seen
- Jun 3, 2026
More from dylantarre/animation-principles
All 144- Navigation Menus601
- Buttons Ctas598
- Figma Prototyping597
- Brand Marketing594
- Solid Drawing Mastery593
- Animator Traditional591
- Motion One589
- Naturalistic Motion589
- Attention Direction586
- Squash Stretch Mastery583
- Fintech Banking581
- Icons Badges581
- Staging Mastery581
- Gesture Responses579
- Arc Mastery578
- Follow Through Overlapping578
- Gaming Entertainment578
- Appeal Mastery577
- Accessibility Advocate576
- Anticipation Mastery575
- Entrance Animations572
- Modals Dialogs572
- Slow In Out Mastery572
- Spatial Thinking572
Recommended
More Frontend Development
auth0-nuxtauth0/agent-skillsUse when adding Auth0 login, logout, session management, or protected routes to a Nuxt 3 or Nuxt 4 application. Integrates @auth0/auth0-nuxt — use even if the u594skills.sh installs
sveltekit-svelte5-tailwind-skillclaude-skills/sveltekit-svelte5-tailwind-skillsveltekit svelte5 tailwind skill586skills.sh installs
angular-best-practices-materialalfredoperez/angular-best-practicesangular best practices material522skills.sh installs
tauri-solidjsdifferent-ai/openworkTauri 2.x + SolidJS stack for OpenWork native app515skills.sh installs