Large 500 800ms

This is your guide for animations that demand attention. 500-800ms is where movement becomes an event people actually watch, so you save it for hero reveals, onboarding flows, and success celebrations. The source walks through all twelve Disney animation principles at this scale, with concrete easing curves and stagger patterns for choreographing multiple elements. The key discipline here is restraint: if you're using 700ms animations on common actions, you're training users to feel impatient. Think of these as theatrical moments that punctuate the experience. One solid take: the implementation examples show proper follow-through with 100-200ms delays on secondary elements, which is what separates animations that feel finished from ones that just stop.

Install to Claude Code

npx -y skills add dylantarre/animation-principles --skill large-500-800ms --agent claude-code