From dylantarre-animation-principles
Use when designing easing curves, controlling motion pacing, creating natural acceleration/deceleration, or making movements feel physically grounded.
npx claudepluginhub joshuarweaver/cascade-content-creation-misc-1 --plugin dylantarre-animation-principlesThis skill uses the workspace's default tool permissions.
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.
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
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.
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.
Traditional animators controlled this through drawing spacing:
Digital animators control this through easing curves—mathematical functions that describe how values change over time.
Timing is modified by easing: The same duration feels different with different easing. Ease out feels faster than ease in at identical durations.
Anticipation often uses ease in: The wind-up accelerates before the fast action.
Follow through uses ease out: Settling motion decelerates to rest.
Squash/stretch intensity follows easing: More deformation during fast phases, less during slow phases.
Beyond basic easing:
For most UI work: use ease out for 80% of animations (elements responding to user action). Ease out communicates responsiveness—"I heard you and I'm moving." Reserve ease in for departures and de-emphasis.
Default to ease out (fast start, slow end) for element appearances and responses. Use ease in for exits. Use ease in out for autonomous animations (not triggered by user). Adjust curve intensity based on brand personality—aggressive curves for dynamic brands, subtle curves for calm brands.