Medium 300 500ms

This covers the 300-500ms animation sweet spot where users actually watch what's happening. You get all the Disney principles in play here: proper squash and stretch, anticipation phases around 80-120ms, follow-through on complex elements. The source includes solid easing curves for different moods (natural, bouncy, dramatic) and shows how to stagger children with 50ms delays. Use this for page transitions, modals, illustrated features, anything where the motion itself communicates meaning. The key insight is right: this duration range is where animation stops being decoration and starts being storytelling. Users remember these, so the polish matters more than quick micro-interactions.

Install to Claude Code

npx -y skills add dylantarre/animation-principles --skill medium-300-500ms --agent claude-code