Notifications Toasts
This covers Disney's 12 animation principles applied specifically to notification toasts, which is surprisingly helpful if you're tired of alerts that just pop in with no finesse. You get timing recommendations (200-300ms enter, 150-250ms exit), easing functions including a bouncy cubic-bezier, and the idea of sequencing secondary actions like icon animations and progress bars after the main container lands. The anticipation principle is clever: shrink the toast to 95% scale for 100ms before auto-dismiss so users aren't surprised when it disappears. It's opinionated about things like using arcs for corner slides and matching animation intensity to urgency, which saves you from having to figure out those details yourself.
- skills.sh installs
- 606
- GitHub stars
- 146
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dylantarre/animation-principles --skill notifications-toasts --agent claude-codeInstalls into .claude/skills of the current project.
Files
Notification & Toast Animation Principles
Apply Disney's 12 principles to notifications for attention-grabbing yet non-disruptive alerts.
Principles Applied to Notifications
1. Squash & Stretch
Toast can compress slightly on entrance impact, then stretch back. Creates a "landing" feel as if it arrived from off-screen.
2. Anticipation
Before auto-dismiss, toast can contract slightly (95% scale) for 100ms. Signals imminent departure to user.
3. Staging
Notifications should appear in consistent locations. Use color and icons to stage importance: info, success, warning, error.
4. Straight Ahead & Pose to Pose
Define states: entering, visible, exiting, stacked. Clear keyframes for entrance, attention (if needed), and exit.
5. Follow Through & Overlapping Action
Icon animates after container arrives (checkmark draws, bell wobbles). Progress bar for auto-dismiss follows toast entrance.
6. Ease In & Ease Out
Enter: ease-out (fast in, slow settle). Exit: ease-in (slow start, fast out). cubic-bezier(0.68, -0.55, 0.27, 1.55) for bounce.
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- Frontend Developer605
- Navigation Menus601
- Buttons Ctas598
- Figma Prototyping597
- Brand Marketing594
- Solid Drawing Mastery593
- Animator Traditional591
- Motion One589
- Naturalistic Motion589
- Attention Direction586
- Squash Stretch Mastery583
- Fintech Banking581
- Icons Badges581
- Staging Mastery581
- Gesture Responses579
- Arc Mastery578
- Follow Through Overlapping578
- Gaming Entertainment578
- Appeal Mastery577
- Accessibility Advocate576
- Anticipation Mastery575
- Entrance Animations572
- Modals Dialogs572
- Slow In Out Mastery572
Recommended
More Design & UI/UX
buttons-ctasdylantarre/animation-principlesUse when animating buttons, CTAs, or clickable action elements to create satisfying, responsive interactions598skills.sh installsanimator-traditionaldylantarre/animation-principlesUse when creating hand-drawn or classical animation, working with frame-by-frame techniques, or applying Disney principles in their original artistic context.591skills.sh installsfintech-bankingdylantarre/animation-principlesUse when designing animations for banking apps, payment systems, investment platforms, or financial dashboards581skills.sh installsgaming-entertainmentdylantarre/animation-principlesUse when designing animations for gaming apps, streaming platforms, entertainment portals, or interactive media578skills.sh installsmodals-dialogsdylantarre/animation-principlesUse when animating modals, dialogs, popovers, or overlay content to create smooth entrances and exits572skills.sh installsexcitement-energydylantarre/animation-principlesUse when creating animations that generate enthusiasm, build anticipation, or create high-energy experiences.570skills.sh installs