From dylantarre-animation-principles
Use when elements need to appear on screen - page loads, modals opening, items being added, content reveals, or any "coming into view" animation.
npx claudepluginhub joshuarweaver/cascade-content-creation-misc-1 --plugin dylantarre-animation-principlesThis skill uses the workspace's default tool permissions.
Apply Disney's 12 principles when bringing elements into view.
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.
Apply Disney's 12 principles when bringing elements into view.
Squash & Stretch: Scale from 95% to 100% on entry. Elements feel elastic, not rigid.
Anticipation: Start slightly below/smaller than final position. A -10px offset before sliding up creates expectation.
Staging: Enter from the direction of user attention. New list items from the top, modals from center, sidebars from their edge.
Straight Ahead vs Pose-to-Pose: Use pose-to-pose. Define clear start state (invisible, offset) and end state (visible, positioned).
Follow Through & Overlapping: Child elements should lag slightly. Container enters first, content 50-100ms after.
Slow In/Slow Out: Use ease-out for entrances. Fast start, gentle landing: cubic-bezier(0, 0, 0.2, 1).
Arcs: Combine Y and X movement. Don't just fade - slide in on a subtle curve.
Secondary Action: Pair fade with scale. Opacity 0→1 while scaling 0.95→1 adds depth.
Timing:
Exaggeration: Scale can start at 0.8 for dramatic effect, 0.95 for subtle polish.
Solid Drawing: Maintain consistent 3D space. Elements entering from "behind" should scale up; from sides should slide.
Appeal: Entrances should feel welcoming. Avoid jarring pops - everything deserves an introduction.
| Element Type | Duration | Easing | Delay Pattern |
|---|---|---|---|
| Toast/Alert | 150ms | ease-out | None |
| Modal | 250ms | ease-out | Content +50ms |
| Card/Item | 200ms | ease-out | None |
| List Items | 200ms | ease-out | Stagger 50ms |
| Page Section | 300ms | ease-out | Stagger 100ms |
| Hero Content | 400ms | ease-out | Stagger 150ms |
.entering {
animation: entrance 250ms cubic-bezier(0, 0, 0.2, 1) forwards;
}
@keyframes entrance {
from {
opacity: 0;
transform: translateY(10px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
For multiple items: delay = index * 50ms, cap at 500ms total sequence time.
Never exceed 5 items in a stagger sequence without user-initiated action.