Playfulness Fun
This is your go-to when you need animations that make people smile instead of just moving pixels around. It leans hard into Disney's animation principles but cranks everything up: 25-40% squash and stretch, bouncy overshoots with cubic-bezier curves that go negative, and secondary actions everywhere. You get specific timing recommendations (400-600ms bounces, 150-250ms pops) and ready-to-use keyframes for wiggles and boings. Best for games, kids' apps, social reactions, and anywhere you want cartoon physics over corporate polish. The timing tables and easing functions alone save you an hour of tweaking values until something feels right.
- skills.sh installs
- 648
- GitHub stars
- 146
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dylantarre/animation-principles --skill playfulness-fun --agent claude-codeInstalls into .claude/skills of the current project.
Files
Playfulness & Fun Animation
Create animations that entertain, surprise, and make interactions genuinely enjoyable.
Emotional Goal
Playfulness invites interaction through unexpected, whimsical motion. Fun comes from animations that have personality, respond expressively, and make users smile.
Disney Principles for Playfulness
Squash & Stretch
Generous, exaggerated (25-40%). Rubbery, cartoon physics. Objects should feel alive and reactive. Bounce like a beach ball.
Anticipation
Exaggerated wind-ups (150-250ms). Comic timing—big preparation for big payoff. Elements "think" before acting.
Staging
Theatrical presentation. Clear setup and punchline. Give playful moments room to breathe and be noticed.
Straight Ahead Action
Embrace spontaneity. Wobbly paths, unpredictable bounces. Characters and elements with minds of their own.
Follow Through & Overlapping Action
Extensive, bouncy follow-through. Overshoots, wobbles, and settling. Like a cartoon character skidding to a stop.
Slow In & Slow Out
Asymmetric with overshoot. Quick starts, bouncy landings. cubic-bezier(0.68, -0.55, 0.265, 1.55) for elastic effect.
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- Creative Director631
- Data Visualization629
- Elegance Sophistication629
- Physics Intuition624
- Carousels Sliders620
- Timing Mastery620
- Transition Sequences619
- Education Learning618
- Rive Animations618
- Travel Hospitality611
- Loading States610
- Dramatic 2000ms Plus609
- Notifications Toasts606
- Frontend Developer605
- Navigation Menus601
- Buttons Ctas598
- Figma Prototyping597
- Brand Marketing594
- Solid Drawing Mastery593
- Animator Traditional591
- Motion One589
- Naturalistic Motion589
- Attention Direction586
- Squash Stretch Mastery583
Recommended
More Design & UI/UX
data-visualizationdylantarre/animation-principlesUse when animating charts, graphs, dashboards, data transitions, or any information visualization work.629skills.sh installseducation-learningdylantarre/animation-principlesUse when designing animations for educational platforms, e-learning, tutoring apps, or skill-building experiences618skills.sh installsrive-animationsdylantarre/animation-principlesUse when implementing Disney's 12 animation principles with Rive interactive animations618skills.sh installstravel-hospitalitydylantarre/animation-principlesUse when designing animations for travel booking, hospitality apps, tourism platforms, or vacation planning experiences611skills.sh installsnotifications-toastsdylantarre/animation-principlesUse when animating notifications, toasts, alerts, snackbars, or system messages to grab attention appropriately606skills.sh installsbuttons-ctasdylantarre/animation-principlesUse when animating buttons, CTAs, or clickable action elements to create satisfying, responsive interactions598skills.sh installs