Installation and usage

Add animations to any element using the ot-animate attribute.

Install via npm

If you use a bundler or build step, install the package:

npm install oat-animate

Then import the CSS/JS from dist/ in your app entry, or copy the built files into your own asset pipeline.


Use via CDN

For a quick drop‑in usage, include the compiled assets from the CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ots-animate@latest/dist/oat-animate.min.css">
<script src="https://cdn.jsdelivr.net/npm/ots-animate@latest/dist/oat-animate.min.js"></script>

Animation Types

Available animations:

  • fade-up - Fades in while moving upward
  • fade-down - Fades in while moving downward
  • zoom-in - Scales up from smaller size
  • slide-left - Slides in from right
  • slide-right - Slides in from left
  • pop - Quick bounce scale effect
  • bounce - Bouncing movement
  • flip-in - 3D flip effect
  • pulse - Pulsing scale animation (loops)
  • shake - Horizontal shake effect

On Load Animation

Animation plays when page loads:


<div ot-animate="fade-up">Content</div>

On Hover Animation

Animation plays on mouse hover:


<div ot-animate="hover:fade-up">Content</div>

In View Animation

Animation plays when element scrolls into viewport:


<div ot-animate="view:fade-up">Content</div>

Multiple Animations

Combine multiple animations on a single element:


<div ot-animate="fade-up hover:zoom-in">Content</div>