From dylantarre-animation-principles
Use when animating modals, dialogs, popovers, or overlay content to create smooth entrances and exits
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 to modals for seamless, non-jarring transitions.
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 to modals for seamless, non-jarring transitions.
Modal can scale from 0.9 to 1.0 on enter, creating a subtle expansion feel. Exit reverses. Keep it subtle to maintain professionalism.
Trigger element (button) should react before modal appears. Brief scale-down of trigger, then modal emerges from that point.
Backdrop dims (0.5-0.7 opacity) to focus attention on modal. Background content can blur slightly (4-8px). Modal is the star.
Define states: hidden, entering, visible, exiting. Clear keyframes for each. Pose-to-pose ensures predictable, controllable animation.
Modal container arrives first, content fades in 50-100ms after. Close button can have slight bounce at end. Stagger form fields.
Enter: ease-out (decelerates in). Exit: ease-in (accelerates out). cubic-bezier(0.16, 1, 0.3, 1) for smooth, bouncy enter.
If modal originates from a button, arc toward center rather than straight line. Creates more organic movement path.
While modal scales in (primary), backdrop fades (secondary), content staggers (tertiary). Each supports without competing.
Dramatic entrance for important alerts. Slight overshoot scale (1.02) before settling at 1.0. Error modals can shake briefly.
Modal shadows should match interface light source. Maintain consistent border-radius. Content should never overflow during animation.
Smooth entrances feel polished. Origin-point animation feels connected. Abrupt modals feel jarring. Invest in modal transitions.
.modal-backdrop {
transition: opacity 250ms ease-out;
}
.modal {
animation: modalEnter 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modalEnter {
from {
opacity: 0;
transform: scale(0.9) translateY(20px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
transform: scale, translate (origin point)opacity: fade in/outbackdrop-filter: blur backgroundanimation: keyframe sequencestransform-origin: source point