If you're looking for an AOS (Animate on Scroll) alternative that's lightweight, performance-focused, and easier to customize, Trig.js might be the best choice. 🚀

Why Look for an AOS Alternative?

AOS.js is a popular choice for adding scroll animations, but it has some drawbacks:

  • 🐢 Performance issues on long pages with many animated elements.
  • ❌ Limited flexibility when working with custom animations.
  • ⚙️ Extra dependencies that add unnecessary weight to your site.

If you're building a modern website and need a smooth, efficient, and flexible scroll animation library, it's time to explore Trig.js.

Meet Trig.js – The Best AOS Alternative

Trig.js is a lightweight, CSS-powered scroll animation library that gives you full control over how elements animate on scroll.

✅ Why Choose Trig.js Over AOS.js?

✔️ Ultra-lightweight (4KB) – Faster load times and better performance.

✔️ CSS-first approach – No unnecessary JavaScript calculations.

✔️ Better animation flexibility – Supports complex interactions.

✔️ Optimized for modern browsers – No janky animations or lag.

✔️ Works with any framework – Use it in vanilla JavaScript, React, Vue, or Webflow.

How to Use Trig.js for Scroll Animations

Getting started with Trig.js is simple. Here’s a quick example:

1️⃣ Install Trig.js 

<span class="na">src="https://cdn.jsdelivr.net/npm/trig-js/src/trig.min.js">

2️⃣ Add Animation Data Attributes

Use the data-trig attributes to activate and data-trig-var for position data:

class="element" data-trig data-trig-var="true">

3️⃣ Customize Animations

Trig.js allows you to use the CSS variable to create your own animations:

.element{ 
    transform: translateX( var(--trig) );
}

🔥 That’s it! Your elements now smoothly animate as they come into view.

See Trig.js in Action

Want to see how Trig.js performs? Check out this live example:

➡️ Modern Floating Header With Article Progress Bar Using Trig.js

⚙️ Trig.js GitHub Repository

Final Thoughts: Is Trig.js the Best AOS Alternative?

If you need a fast, lightweight, and highly customizable AOS.js alternative, Trig.js is your best option. Whether you're working on a landing page, portfolio, or complex web app, Trig.js ensures smooth scroll animations without compromising performance.

🚀 Ready to upgrade your animations? Try Trig.js today:

👉 GitHub Repo

What do you think? Have you tried Trig.js yet? Let me know in the comments! 💬