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
<script src="https://cdn.jsdelivr.net/npm/trig-js/src/trig.min.js"></script>
2οΈβ£ Add Animation Data Attributes
Use the data-trig
attributes to activate and data-trig-var
for position data:
<div class="element" data-trig data-trig-var="true"> </div>
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! π¬
Top comments (0)