Saas Productivity
This teaches you how to apply Disney's 12 animation principles to SaaS and productivity tools without making them feel like cartoons. You get specific timing guidelines (100ms button feedback, 250ms modals), concrete examples for each principle (checkbox squash on completion, curved arcs for kanban cards), and a clear philosophy that animations should be invisible to focused users. The best part is knowing when not to animate. Most productivity apps either skip motion entirely or overdo it with bouncy consumer-style effects. This gives you the middle path with actual millisecond targets and easing functions you can drop straight into your CSS.
- skills.sh installs
- 757
- GitHub stars
- 146
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dylantarre/animation-principles --skill saas-productivity --agent claude-codeInstalls into .claude/skills of the current project.
Files
SaaS & Productivity Animation Principles
Apply Disney's 12 principles to create efficient, professional experiences that enhance focus and reduce friction.
The 12 Principles Applied
1. Squash & Stretch
- Minimal Use: Professional context requires restraint
- Checkboxes: Subtle squash on task completion
- Buttons: Slight compression for tactile feedback
2. Anticipation
- Save Actions: Brief preparation before confirmation
- Form Submit: Button state hints at processing
- Drag Initiation: Element lifts before moving
3. Staging
- Active Task: Current work item takes focus
- Sidebar Navigation: Secondary to main content
- Notifications: Non-intrusive placement
4. Straight Ahead & Pose to Pose
- Workflows: Clear step-by-step processes (pose to pose)
- Real-time Collaboration: Smooth cursor movements (straight ahead)
- Dashboard Updates: Sequential data loading
5. Follow Through & Overlapping Action
- Card Movements: Shadow follows card with delay
- List Reordering: Items settle naturally
- Panel Resizing: Content adjusts after panel stops
Sponsors
Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthly
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 language
Agent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee 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- Game Development750
- Page Transitions718
- Fitness Wellness709
- Presentations705
- E Commerce Retail690
- Educator Teacher690
- Accessible Motion689
- Anime Js682
- Emotional Narrative674
- Rhythm Pacing663
- Healthcare Medical654
- Lottie Bodymovin652
- Hover Interactions650
- Character Appeal648
- Playfulness Fun648
- Creative Director631
- Data Visualization629
- Elegance Sophistication629
- Physics Intuition624
- Carousels Sliders620
- Timing Mastery620
- Transition Sequences619
- Education Learning618
- Rive Animations618
Recommended
More Design & UI/UX1
ui-auditmblode/agent-skillsAudits built React and Next.js frontends for user-facing defects in code and rendered UI: state gaps, data loss, double submits, focus and keyboard failures, ro733skills.sh installs
ui-auditmblode/agent-skillsAudits built React and Next.js frontends for user-facing defects in code and rendered UI: state gaps, data loss, double submits, focus and keyboard failures, ro733skills.sh installs2
syncfusion-react-dropdown-treesyncfusion/react-ui-components-skillsImplement Syncfusion React Dropdown Tree component for hierarchical data selection with dropdown interaction. Use this when working with multi-select checkboxes728skills.sh installs
syncfusion-react-dropdown-treesyncfusion/react-ui-components-skillsImplement Syncfusion React Dropdown Tree component for hierarchical data selection with dropdown interaction. Use this when working with multi-select checkboxes728skills.sh installs3
brand-guidelinesalirezarezvani/claude-skillsWhen the user wants to apply, document, or enforce brand guidelines for any product or company. Also use when the user mentions 'brand guidelines,' 'brand color720skills.sh installs
brand-guidelinesalirezarezvani/claude-skillsWhen the user wants to apply, document, or enforce brand guidelines for any product or company. Also use when the user mentions 'brand guidelines,' 'brand color720skills.sh installs4
page-transitionsdylantarre/animation-principlesUse when implementing route changes, view transitions, modal opens/closes, or navigation animation in web and mobile applications.718skills.sh installs
page-transitionsdylantarre/animation-principlesUse when implementing route changes, view transitions, modal opens/closes, or navigation animation in web and mobile applications.718skills.sh installs5fitness-wellnessdylantarre/animation-principlesUse when designing animations for fitness apps, wellness platforms, workout trackers, or meditation experiences709skills.sh installs
fitness-wellnessdylantarre/animation-principlesUse when designing animations for fitness apps, wellness platforms, workout trackers, or meditation experiences709skills.sh installs6e-commerce-retaildylantarre/animation-principlesUse when designing animations for shopping apps, product catalogs, checkout flows, or retail experiences690skills.sh installs
e-commerce-retaildylantarre/animation-principlesUse when designing animations for shopping apps, product catalogs, checkout flows, or retail experiences690skills.sh installs