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.
- skills.sh installs
- 542
- GitHub stars
- 146
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dylantarre/animation-principles --skill lists-grids --agent claude-codeInstalls into .claude/skills of the current project.
Files
List & Grid Animation Principles
Apply Disney's 12 principles to lists and grids for smooth, organized motion.
Principles Applied to Lists & Grids
1. Squash & Stretch
List items compress slightly when grabbed for reorder. Grid items can stretch when expanding to fill space on filter.
2. Anticipation
Before list reorders, items briefly compress. Before filter removes items, they can shrink slightly. Prepares for change.
3. Staging
Item being dragged lifts above others (z-index + shadow). Filtered results highlight while others fade. Guide eye to relevant items.
4. Straight Ahead & Pose to Pose
Define states: entering, resting, reordering, exiting. Use pose-to-pose for predictable, controllable list animations.
5. Follow Through & Overlapping Action
Stagger item entrance: first item leads, others follow (30-50ms delay). Content within items lags behind item container.
6. Ease In & Ease Out
Item enter: ease-out. Item exit: ease-in. Reorder: ease-in-out. Stagger easing should feel like a wave, not mechanical.
7. Arcs
Reordering items should follow curved paths, not straight lines. Adds personality and organic feel to grid shuffles.
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/dylantarre/animation-principles
- Category
- Design & UI/UX
- First seen
- Jun 3, 2026
More from dylantarre/animation-principles
All 144- Urgency Action542
- User Feedback Clarity542
- Power Confidence540
- Feedback Indicators539
- Universal Patterns539
- Continuous Infinite535
- Emotional Disconnect534
- Problem Diagnosis534
- Responsive Adaptive534
- State Changes534
- Popmotion533
- Professionalism Credibility533
- Comfort Safety532
- Implementation Debugging532
- Technical Constraints532
- Friendliness Approachability531
- Motion Sickness531
- Large 500 800ms530
- Medium 300 500ms530
- Universal Industry530
- Trust Reliability529
- Deliberate 1200 2000ms528
- Product Manager528
- Small 200 300ms528
Recommended
More Design & UI/UX
urgency-actiondylantarre/animation-principlesUse when creating animations that prompt immediate user action, highlight time-sensitivity, or drive conversions.542skills.sh installs
glassmorphismainergiz/design-inspirationsCreates frosted glass UI elements with blur, transparency, and subtle borders. Use when building overlays, floating controls, tooltips, or any element that shou541skills.sh installspower-confidencedylantarre/animation-principlesUse when creating animations that convey strength, authority, or bold confidence in brand and product.540skills.sh installsstate-changesdylantarre/animation-principlesUse when elements transform in place - toggle switches, expanding accordions, checkbox animations, button states, or any transformation without entering/exiting534skills.sh installsimplementation-debuggingdylantarre/animation-principlesUse when animation doesn't work as expected, has bugs, or behaves inconsistently532skills.sh installstechnical-constraintsdylantarre/animation-principlesUse when animation is limited by browser support, platform capabilities, or technical requirements532skills.sh installs