Entrance Animations
This applies Disney's 12 animation principles to UI entrance animations, giving you specific timing and easing recommendations for different element types. You get concrete durations (150ms for toasts, 250ms for modals, up to 400ms for hero sections), a stagger formula that caps at 500ms total, and the specific cubic-bezier(0, 0, 0.2, 1) easing curve. The guidance to combine fade with scale and add slight Y-axis translation is solid. The principle breakdown is more educational than prescriptive, but the timing table and implementation pattern are immediately useful. Best for teams that want consistent motion design without reinventing animation curves for every component.
- skills.sh installs
- 572
- GitHub stars
- 146
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dylantarre/animation-principles --skill entrance-animations --agent claude-codeInstalls into .claude/skills of the current project.
Files
Entrance Animations
Apply Disney's 12 principles when bringing elements into view.
Principle Application
Squash & Stretch: Scale from 95% to 100% on entry. Elements feel elastic, not rigid.
Anticipation: Start slightly below/smaller than final position. A -10px offset before sliding up creates expectation.
Staging: Enter from the direction of user attention. New list items from the top, modals from center, sidebars from their edge.
Straight Ahead vs Pose-to-Pose: Use pose-to-pose. Define clear start state (invisible, offset) and end state (visible, positioned).
Follow Through & Overlapping: Child elements should lag slightly. Container enters first, content 50-100ms after.
Slow In/Slow Out: Use ease-out for entrances. Fast start, gentle landing: cubic-bezier(0, 0, 0.2, 1).
Arcs: Combine Y and X movement. Don't just fade - slide in on a subtle curve.
Secondary Action: Pair fade with scale. Opacity 0→1 while scaling 0.95→1 adds depth.
Timing:
- Quick entrances: 150-200ms (toasts, tooltips)
- Standard entrances: 200-300ms (modals, cards)
- Dramatic reveals: 300-500ms (hero sections, page transitions)
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
- Categories
- Design & UI/UX, CLI & Terminal
- First seen
- Jun 3, 2026
More from dylantarre/animation-principles
All 144- Modals Dialogs572
- Slow In Out Mastery572
- Spatial Thinking572
- Ux Researcher571
- Excitement Energy570
- Anticipation Payoff568
- Calm Relaxation566
- Joy Delight566
- Attention Grabbers565
- Brand Consistency565
- Timing Principle Mastery565
- Micro 100 200ms564
- Exaggeration Mastery562
- Performance Optimization562
- React Spring562
- Enterprise B2b558
- Cards Containers557
- Orchestrated Sequences557
- Universal Emotion556
- Loaders Spinners554
- Forms Inputs553
- Secondary Action Mastery551
- Social Media551
- Attention Management550
Recommended
More Design & UI/UX
attention-grabbersdylantarre/animation-principlesUse when drawing user focus - notification badges, new feature highlights, error callouts, promotional banners, or any animation meant to attract attention.565skills.sh installsloaders-spinnersdylantarre/animation-principlesUse when creating loading indicators, spinners, progress bars, or skeleton screens to communicate system status554skills.sh installsforms-inputsdylantarre/animation-principlesUse when animating form fields, inputs, textareas, selects, or interactive form elements to improve usability and feedback553skills.sh installssocial-mediadylantarre/animation-principlesUse when designing animations for social platforms, messaging apps, content sharing, or community features551skills.sh installsuser-feedback-claritydylantarre/animation-principlesUse when users don't notice feedback, miss state changes, or can't tell if their action worked542skills.sh installsprofessionalism-credibilitydylantarre/animation-principlesUse when creating animations for business contexts that require seriousness, competence, and trustworthy presentation.533skills.sh installs