Skip to main content
Slide animations move elements from off-screen or to off-screen positions, creating smooth transitions that guide the user’s eye to important content.

​
Basic Slide Animations

Element slides in from above.
<div class="animate-slide-in-top">
  Slides down from 20px above
</div>
Movement: translateY(-20px) to translateY(0)Duration: 600msBest for: Dropdown menus, header notifications, alerts from the top

​
Slide Out Animations

Element slides out upward.
<div class="animate-slide-out-top">
  Slides up and exits
</div>
Movement: translateY(0) to translateY(-20px)Duration: 600msBest for: Dismissing top notifications, collapsing headers
Element slides out downward.
<div class="animate-slide-out-bottom">
  Slides down and exits
</div>
Movement: translateY(0) to translateY(20px)Duration: 600msBest for: Dismissing bottom sheets, hiding footers
Element slides out to the left.
<div class="animate-slide-out-left">
  Slides left and exits
</div>
Movement: translateX(0) to translateX(-20px)Duration: 600msBest for: Closing side panels, dismissing cards to the left
Element slides out to the right.
<div class="animate-slide-out-right">
  Slides right and exits
</div>
Movement: translateX(0) to translateX(20px)Duration: 600msBest for: Dismissing notifications, swiping cards away

​
Advanced Slide Animations

​
slide-up-fade

Combines upward sliding with a fade effect for a dramatic entrance. 
<div class="animate-slide-up-fade">
  Slides up 50px while fading in
</div>
Animation details:
  • Starts at translateY(50px) with opacity: 0
  • Ends at translateY(0) with opacity: 1
  • More dramatic movement (50px vs standard 20px)
Duration: 600ms Best for: Hero sections, feature cards, modal entries

​
slide-rotate-in

Element slides in from the left while rotating. 
<div class="animate-slide-rotate-in">
  Slides and rotates into view
</div>
Animation details:
  • Starts at translateX(-20px) rotate(-90deg) with opacity: 0
  • Ends at translateX(0) rotate(0deg) with opacity: 1
Duration: 600ms Best for: Playful UI elements, game interfaces, creative cards

​
slide-rotate-out

Element slides out to the right while rotating. 
<div class="animate-slide-rotate-out">
  Rotates and slides out of view
</div>
Animation details:
  • Starts at translateX(0) rotate(0deg) with opacity: 1
  • Ends at translateX(20px) rotate(90deg) with opacity: 0
Duration: 600ms Best for: Dismissing cards with flair, playful exit effects

​
Customization Examples

​
Slower, Smoother Slide

<div class="animate-slide-in-bottom animate-duration-slower animate-bezier-cubic-out">
  Elegant, slow slide with smooth easing
</div>

​
Quick Slide with Bounce

<div class="animate-slide-in-top animate-duration-fast animate-bezier-back-out">
  Fast slide with a bounce at the end
</div>

​
Delayed Slide Sequence

<div class="animate-slide-in-left animate-delay-0">First</div>
<div class="animate-slide-in-left animate-delay-150">Second</div>
<div class="animate-slide-in-left animate-delay-300">Third</div>

​
Alternating Slide Animation

<div class="animate-slide-in-right 
            animate-iteration-count-infinite 
            animate-direction-alternate 
            animate-duration-slow">
  Slides back and forth
</div>

​
Practical Use Cases

​
Mobile Menu

<!-- Menu overlay -->
<div class="fixed inset-0 bg-black/50 animate-fade-in" />

<!-- Menu panel -->
<nav class="fixed left-0 top-0 bottom-0 w-64 bg-white animate-slide-in-left">
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</nav>

​
Toast Notification

<div class="fixed bottom-4 right-4 
            bg-green-500 text-white p-4 rounded 
            animate-slide-in-bottom">
  Success! Your changes have been saved.
</div>

<!-- Backdrop -->
<div class="fixed inset-0 bg-black/75 animate-fade-in" />

<!-- Modal -->
<div class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
            bg-white rounded-lg p-6 animate-slide-in-top animate-delay-100">
  <h2>Confirm Action</h2>
  <p>Are you sure you want to continue?</p>
</div>

​
Accordion Panel

<div class="overflow-hidden">
  <div class="animate-slide-in-top">
    Accordion content revealed with smooth slide
  </div>
</div>

​
Combining with Duration and Easing

​
Natural Entrance

<div class="animate-slide-in-bottom 
            animate-duration-normal 
            animate-bezier-quad-out">
  Natural, organic slide motion
</div>

​
Snappy UI Response

<div class="animate-slide-in-right 
            animate-duration-faster 
            animate-ease-out">
  Fast, responsive slide
</div>

​
Dramatic Entrance

<div class="animate-slide-up-fade 
            animate-duration-slower 
            animate-bezier-quint-out">
  Slow, dramatic reveal
</div>

​
Tips and Best Practices

Match slide direction with the element’s position. Top elements should slide from top, side panels from the side.
Use animate-fill-mode-both to maintain the element’s start state before the animation and end state after.
<div class="animate-slide-in-left animate-delay-500 animate-fill-mode-both">
  Maintains position before and after animation
</div>
When sliding elements out, make sure to remove them from the DOM after animation completes to prevent layout issues.

​
Handling Exit Animations

const element = document.querySelector('.notification');
element.classList.add('animate-slide-out-top');

// Remove after animation (600ms default + small buffer)
setTimeout(() => element.remove(), 650);

​
Performance Notes

  • Slide animations use transform: translate() which is GPU-accelerated
  • They’re highly performant and suitable for mobile devices
  • Combining with opacity (like slide-up-fade) is still performant
  • Avoid animating hundreds of elements simultaneously

Build docs developers (and LLMs) love

Get started for freeTalk to us