100+ Lightweight & Performant Web Animations – Ani-JS

# Yarn
$ yarn add ani-js
# NPM
$ npm install ani-js

Hello World






Click Me

3. You can also import and call animation functions directly in your JavaScript. This is useful for animations triggered by events.

Animate Me
Trigger Animation

4. In a React component, you can use the class-based approach directly in your JSX or trigger animations inside a useEffect hook. I prefer the useEffect approach for animations that need to run after a component mounts or a state changes.

import '../node_modules/ani-js/ani-js.css';
import { useEffect, useRef } from 'react';
import { bounceIn } from 'ani-js';
function MyComponent() {
  const animatedEl = useRef(null);
  useEffect(() => {
    if (animatedEl.current) {
      // Animate the element after the component mounts
      bounceIn(animatedEl.current, 1000);
    }
  }, []); // Empty dependency array ensures it runs once on mount
  return 
I will bounce in!
;
}

Animation and Class Reference

Here is a full list of the animations available in Ani-Js. You can trigger them using the JavaScript function or by applying the corresponding utility class directly in your HTML.

Entrance Animations

Exit Animations

Attention Animations

Effects Animations

Transform Animations

Hover Animations

Color Effects

Changelog:

v1.5.2 (06/26/2025)