Slide Up Animation

FREE

A simple slide up animation for elements

Demo

Blur In
Exclusive Launch 50% offspots left: 0 / 50
3D Cube - happy face3D Cube - Happy Face
$39.99

$19.99

Payment once and get lifetime access
Access to all animations
All updates
All animations
No subscriptions

Installation

1

Copy and paste the following code into your project.

Add the class animate-slide-up to the element you want to animate.

global.css

@layer utilities {
    // START HERE ------------------------------------------------------------
     .animate-slide-up {
        animation: slideUp 0.5s ease-out forwards;
     }

     @keyframes slideUp {
         from {
            transform: translateY(20px);
            opacity: 0;
         }
         to {
            transform: translateY(0);
            opacity: 1;
         }
       }
    // END HERE ------------------------------------------------------------
}

2

Use the class animate-slide-up to apply the animation to an element.


<div class="animate-slide-up">
  <!-- Your content here -->
</div>
2

Start using the class animate-slide-up