Lists Grids

This applies Disney's 12 animation principles to lists, grids, and tables. You get specific timing guidance (50ms stagger delays, 250-350ms for reorders), easing recommendations for different states, and techniques like curved paths for drag operations and staggered entrances that feel like waves. The approach is pose-to-pose rather than trying to wing it frame by frame. Honestly, the prescriptive timings are the most useful part here. Without them, you end up tweaking animation-delay values forever trying to make a filtered grid look smooth instead of janky. It's opinionated but that's better than another vague "make it feel natural" guide.

Install to Claude Code

npx -y skills add dylantarre/animation-principles --skill lists-grids --agent claude-code