Slow In Out Mastery
This one teaches you the physics behind why good animation feels natural instead of robotic. It breaks down easing curves (ease in, ease out, linear) and gives you the 80/20 rule: use ease out for 80% of UI animations because fast starts communicate responsiveness. The spacing principle is clearly explained, traditional animation concepts map to digital bezier curves, and there are specific recommendations for buttons, modals, character jumps, and camera movement. The domain applications section is genuinely useful because it tells you which easing to use where and why. If your animations feel lifeless or you're just guessing at curve values, this gives you the underlying theory to make intentional choices.
- skills.sh installs
- 572
- GitHub stars
- 146
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dylantarre/animation-principles --skill slow-in-out-mastery --agent claude-codeInstalls into .claude/skills of the current project.
Files
Slow In / Slow Out Mastery
The Physics Principle
Objects in the real world don't move at constant speeds—they accelerate from rest and decelerate to stops. Slow in/slow out (also called ease in/ease out) captures this fundamental truth. Without it, animation looks mechanical. With it, motion feels alive.
Core Theory
Slow Out (Ease Out): More drawings clustered at the start of a movement. The object accelerates away from its starting position gradually.
Slow In (Ease In): More drawings clustered at the end of a movement. The object decelerates into its final position gradually.
Linear motion: Equal spacing between positions. Rare in nature, useful for mechanical elements or stylistic choice.
The Spacing Principle
Traditional animators controlled this through drawing spacing:
- Tight spacing = slow movement (drawings close together)
- Wide spacing = fast movement (drawings far apart)
Digital animators control this through easing curves—mathematical functions that describe how values change over time.
Common Easing Functions
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- Spatial Thinking572
- Ux Researcher571
- Excitement Energy570
- Anticipation Payoff568
- Calm Relaxation566
- Joy Delight566
- Attention Grabbers565
- Brand Consistency565
- Timing Principle Mastery565
- Micro 100 200ms564
- Exaggeration Mastery562
- Performance Optimization562
- React Spring562
- Enterprise B2b558
- Cards Containers557
- Orchestrated Sequences557
- Universal Emotion556
- Loaders Spinners554
- Forms Inputs553
- Secondary Action Mastery551
- Social Media551
- Attention Management550
- Brand Strategist548
- Exit Animations547
Recommended
More Design & UI/UX
spatial-thinkingdylantarre/animation-principlesUse when animation involves depth, perspective, volume, or three-dimensional awareness—camera moves, character positioning, environmental interaction, or mainta572skills.sh installsanticipation-payoffdylantarre/animation-principlesUse when designing action sequences, gags, reveals, or any motion that needs setup before delivery—preparing audiences for what's coming and maximizing impact.568skills.sh installstiming-principle-masterydylantarre/animation-principlesUse when determining animation durations, controlling pacing, establishing rhythm, or making motion feel appropriately weighted and emotionally resonant.565skills.sh installsexaggeration-masterydylantarre/animation-principlesUse when determining how far to push motion beyond realism, calibrating animation intensity for context, or making key moments register with audiences.562skills.sh installs
creative-mechanicsmotion-team/creative-strategy-skillsA library of creative mechanics — the structural patterns that define how an ad constructs meaning between its hook, visuals, and narrative. Use this whenever d560skills.sh installscreative-strategy-enginemotion-team/creative-strategy-skillsStrategic framework for mapping pain/persona intersections and messaging angles. Defines the structure for organizing creative strategy, not the tactics for exe559skills.sh installs