entrance-animations
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.
More from dylantarre/animation-principles
mobile-touch
Use when designing iOS/Android gestures, haptic feedback, touch interactions, or native mobile animations.
1.7Kvideo-motion-graphics
Use when creating After Effects compositions, Premiere Pro motion, video titles, explainer videos, or broadcast motion graphics.
630motion-designer
Use when designing visual motion systems, creating animation specifications, or when a designer needs guidance on crafting beautiful, meaningful movement.
561micro-interactions
Use when designing small UI feedback moments like button states, toggles, form validation, loading indicators, or notification badges.
442saas-productivity
Use when designing animations for business tools, project management, collaboration software, or productivity apps
293game-designer
Use when designing game feel, player feedback systems, or when creating animations that enhance gameplay and player satisfaction.
287