100+ Lightweight & Performant Web Animations – Ani-JS

Ani-JS is a lightweight animation library that enhances your HTML elements and UI components with 100+ pre-built animations.

The library is built for developers who need quick, performant animations like fades, slides, and bounces without pulling in a heavy dependency like GSAP or Anime.js.

Features:

• Zero Dependencies: No external libraries required, keeping bundle sizes minimal
• Dual API Support: Use CSS classes or JavaScript functions for maximum flexibility
• Framework Agnostic: Works with vanilla JavaScript, React, Vue, and other frameworks
• Extensive Animation Library: 100+ animations including entrance, exit, hover, and color effects
• Ultra-Lightweight: Only 3.6KB gzipped, significantly smaller than alternatives
• Tailwind-Style Classes: Familiar utility-class naming convention for easy adoption
• Performance Optimized: CSS-based animations with hardware acceleration support

How to use it:

1. Install the package via npm/yarn or link to the CDN:

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ani-js@latest/ani-js.css" />
<script type="module" src="https://cdn.jsdelivr.net/npm/ani-js@latest/index.js"></script>

2. The fastest way to use Ani-Js is by adding its utility classes to your HTML elements. The library mimics Tailwind’s class naming convention.

<!-- This element will fade in on load -->
<div class="tw-fade-in">Hello World</div>
<!-- This element will bounce when you hover over it -->
<button class="tw-hover-bounce">Click Me</button>

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

<div id="box">Animate Me</div>
<button id="action-btn">Trigger Animation</button>

<script type="module">
  import { fadeIn } from 'ani-js';
  document.getElementById('action-btn').addEventListener('click', () => {
    const el = document.getElementById('box');
    // The second argument is the duration in milliseconds
    fadeIn(el, 700);
  });
</script>

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 <div ref={animatedEl}>I will bounce in!</div>;
}

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.9 (08/24/2025)

• added phy related animations

v1.5.8 (07/20/2025)

• 150+ new animations added
• Class-based usage support
• Bug Fixes