This covers transitions in the 200-300ms range, where users consciously perceive motion rather than just registering a state change. It's your go-to for modals, card expansions, navigation drawers, and anything that needs to feel deliberate without dragging. The guide breaks down which Disney animation principles actually work at this duration (squash and stretch, follow through, arcs) versus what doesn't (complex sequences, long distances). Includes specific easing curves for different personalities, from professional cubic-bezier(0.4, 0, 0.2, 1) at 220ms to bouncy cubic-bezier(0.34, 1.56, 0.64, 1) at 280ms. The key insight is right: at this speed, users track the motion and process spatial relationships, so use it to guide attention.
npx skills add https://github.com/dylantarre/animation-principles --skill small-200-300ms