Ani-Js

A lightweight JavaScript animation library that mimics Tailwind-style utility classes — no Tailwind installation needed. Injects minimal CSS for clean animations like fadeIn, slideUp, and more.

• 📦 No Tailwind required
• 💨 Utility-class style like .tw-fade-in
• ⚡ Zero setup, just import and use
• 🧩 Works with plain JavaScript, React, Vue, TypeScript, and more
• 🎨 100+ prebuilt animations and effects

---

📚 Documentation & Playground

For full features, class names,playground, demos, and advanced usage, visit the official website:
👉 Ani-Js.com

⭐ If you find this package useful, please consider dropping a star on GitHub!

---

🚀 Installation

npm install ani-js

or

yarn add ani-js

---

🔧 Usage

📜 Vanilla JavaScript

<div id="box">Hello</div>
<button id="btn">Animate</button>
<!-- for class based usage -->
<div id="box" class="tw-fade-in">Hello</div>
<script type="module">
  import { fadeIn } from 'ani-js';

  document.getElementById('btn').addEventListener('click', () => {
    const el = document.getElementById('box');
    fadeIn(el, 700);
  });
</script>

⚠️ Important:
This example uses ES Module syntax (import) and will not work by directly opening the HTML file in a browser.

To run this successfully, you must:

• Use a module-aware bundler or dev server such as Vite, Webpack, or Parcel OR
• Load ani-js from a CDN (like jsDelivr, UNPKG) that supports ES Modules
• To use as classes in Html use stylesheets as jsDelivr
• For React Import the package then in your App.jsx or Main.jsx import the classes from "../node_modules/ani-js/ani-js.css" set it as global so you can use it anywhere. Without one of these setups, your browser will throw a module resolution error and the animation will fail to load.
• All the other use cases and informations are provided in the documentation!

---

⚛️ React

import { slideUp } from 'ani-js';
import { useEffect, useRef } from 'react';

function MyComponent() {
  return (
    //for class based usage
    <div className="tw-slide-up">
      Welcome!
    </div>
  );
}

function MyComponent() {
  const ref = useRef();

  useEffect(() => {
    slideUp(ref.current, 600);
  }, []);

  return <div ref={ref}>Welcome!</div>;
}

---

🤝 Contributing

🧭 Getting Started

1. Fork the repository
2. Clone your fork locally

   git clone https://github.com/Srinanth/Ani-Js.git
   cd ani-js

3. Create a feature branch

   git checkout -b addition/new-animation

4. Make changes – Add new animations, improve logic, or refactor existing code
5. Commit your changes

   git commit -m "✨ Added New Animation"

6. Push to your branch

   git push origin addition/new-animation

7. Open a Pull Request on GitHub

---

📐 Development Guidelines

• Code Style: Follow existing patterns used in JavaScript, CSS, and React files
• Animations: Keep utility class names consistent (tw-fade-in, tw-zoom-in, etc.)
• Testing:
  • Manually test animations using the local playground page
  • Add unit tests where applicable (planned for future integration)
• CSS: Avoid bloated styles — Ani-Js is meant to stay minimal and fast
• Performance: Prefer CSS-based animations over JS unless JavaScript is required

---

🧪 Local Dev Tips

• Use the Vite dev server for rapid development
• Run a local playground to test all animations in real-time

---