Entrance Animations

This applies Disney's 12 animation principles to UI entrance animations, giving you specific timing and easing recommendations for different element types. You get concrete durations (150ms for toasts, 250ms for modals, up to 400ms for hero sections), a stagger formula that caps at 500ms total, and the specific cubic-bezier(0, 0, 0.2, 1) easing curve. The guidance to combine fade with scale and add slight Y-axis translation is solid. The principle breakdown is more educational than prescriptive, but the timing table and implementation pattern are immediately useful. Best for teams that want consistent motion design without reinventing animation curves for every component.

Install to Claude Code

npx -y skills add dylantarre/animation-principles --skill entrance-animations --agent claude-code