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

Function Name	CSS Class
fadeIn	tw-fade-in
slideUp	tw-slide-up
slideDown	tw-slide-down
slideLeft	tw-slide-left
slideRight	tw-slide-right
zoomIn	tw-zoom-in
bounceIn	tw-bounce-in
flipInX	tw-flip-in-x
flipInY	tw-flip-in-y
rotateIn	tw-rotate-in
rollIn	tw-roll-in
lightSpeedIn	tw-light-speed-in
jackInTheBox	tw-jack-in-the-box

Exit Animations

Function Name	CSS Class
fadeOut	tw-fade-out
slideUp	tw-slide-up
slideDown	tw-slide-down
slideLeft	tw-slide-left
slideRight	tw-slide-right
zoomOut	tw-zoom-out
bounceOut	tw-bounce-out
flipOutX	tw-flip-out-x
flipOutY	tw-flip-out-y
rotateOut	tw-rotate-out
rollOut	tw-roll-out
lightSpeedOut	tw-light-speed-out

Attention Animations

Function Name	CSS Class
bounce	tw-bounce
shake	tw-shake
pulse	tw-pulse
flash	tw-flash
wobble	tw-wobble
swing	tw-swing
tada	tw-tada
jello	tw-jello
heartbeat	tw-heartbeat
blink	tw-blink
wave	tw-wave
sway	tw-sway

Effects Animations

Function Name	CSS Class
Glow	tw-glow
Shadow	tw-shadow
neonGlow	tw-neon-glow
shimmer	tw-shimmer
glitch	tw-glitch
mirror	aura
dust	sparkle

Transform Animations

Function Name	CSS Class
scaleUp	tw-scale-up
scaleDown	tw-scale-down
enlarge	tw-enlarge
shrink	tw-shrink
rotate	tw-rotate
floating	tw-floating
zigzag	tw-zigzag
orbit	tw-orbit
popUpSpin	tw-pop-up-spin

Hover Animations

Function Name	CSS Class
HoverPop	tw-hover-pop
HoverShrink	tw-hover-shrink
HoverEnlarge	tw-hover-enlarge
HoverShake	tw-hover-shake
HoverFade	tw-hover-fade
HoverGlow	tw-hover-glow
HoverShadow	tw-hover-shadow
hoverBlur	tw-hover-blur
hoverRotate	tw-hover-rotate
hoverUnderlineLeft	tw-hover-underline-left
hoverUnderlineRight	tw-hover-underline-right
hoverBorderGlow	tw-hover-border-glow
hoverScaleBounce	tw-hover-scale-bounce
hoverTilt	tw-hover-tilt
HoverUpsideDown	tw-hover-upsidedown
HoverTeleport	tw-hover-teleport

Color Effects

Function Name	CSS Class
ColorCycle	tw-color-cycle
BlackRed	tw-black-red
BlackBlue	tw-black-blue
BlackGreen	tw-black-green
BlackPurple	tw-black-purple
BlackYellow	tw-black-yellow
BlackWhite	tw-black-white
BlackOrange	tw-black-orange
BlackPink	tw-black-pink
BlackGray	tw-black-gray
BlackCyan	tw-black-cyan
BlackBrown	tw-black-brown
BlackGold	tw-black-gold
BlackSilver	tw-black-silver
BlackMagenta	tw-black-magenta
BlueYellow	tw-blue-yellow
DarkGreenLime	tw-dark-green-lime
PurpleOrange	tw-purple-orange
IndigoPink	tw-indigo-pink
GrayCyan	tw-gray-cyan
DarkBlueWhite	tw-dark-blue-white
TealSalmon	tw-teal-salmon
OliveViolet	tw-olive-violet
BrownSkyBlue	tw-brown-sky-blue
MidnightGreenMint	tw-midnight-green-mint
CrimsonLemon	tw-crimson-lemon
SlatePeach	tw-slate-peach
CharcoalLavender	tw-charcoal-lavender
MaroonMint	tw-maroon-mint
DarkCyanGold	tw-dark-cyan-gold
DeepPurpleIvory	tw-deep-purple-ivory
ForestPink	tw-forest-pink
SteelRose	tw-steel-rose
EggplantSun	tw-eggplant-sun

The post 100+ Lightweight & Performant Web Animations – Ani-JS appeared first on CSS Script.