Ever noticed how GitHub’s mobile app keeps the page repo details visible in a floating header as you scroll? It’s a slick UX touch that enhances navigation. In this post, I’ll show you how to achieve the same effect using Trig.js, the lightweight and ultra-fast scroll animation library.
Why Use Trig.js for Scroll Animations?
Most AOS (Animation on Scroll) libraries rely heavily on JavaScript for animations, which can impact performance. Trig.js is different—it’s CSS-based, meaning it leverages the browser’s GPU for smoother, more efficient animations.
✅ Why Trig.js?
⚡ Lightweight (~4KB) → No bloated dependencies
🎯 Optimized for scroll performance → No jank, no lag
🎨 Pure CSS scroll animations → Faster than JS-heavy alternatives
🏆 Best AOS alternative → Simple, powerful, and built for modern web apps
🛠️ Building the Floating Header Effect
🚀 Why Trig.js is the Best AOS Library for This?
| Feature | Trig.js 🏆 | AOS.js | ScrollTrigger (GSAP) |
|---|---|---|---|
| Lightweight (~4KB) | ✅ | ❌ (~6KB) | ❌ (100KB+) |
| CSS-based (Fastest) | ✅ | ❌ | ❌ (JS-heavy) |
| Easy Setup | ✅ | ✅ | ❌ (Complex) |
| Predefined Animations | ✅ | ✅ | ✅ |
🏁 Final Thoughts
Trig.js makes it ridiculously easy to create scroll-based animations with zero JavaScript complexity. Whether you’re building sticky headers, fade-ins, or full-page animations, it’s the best AOS alternative in 2025.
Why not have a look at our Trig.js AOS tutorial and give it ago for yourself.
💬 What do you think? Would you use this in your project? Let me know in the comments! 👇
🔗 Try Trig.js Today | Docs | GitHub Repo
Top comments (5)
IntersectionObserverwas definitely the right API to base this on. Nice to see it starting to pop up in the wild. I wrote few custom-elements with it back in 2021 and your lib is the first example I've seen of someone else even discussing this technique. Good job!Thanks! I'm not using it in the conventional way it was designed to be used however it's the only way I can achieve avoiding reflows and get element position data on every scroll. It's great to be able to open this API up to other developers to use in endless creative ways.
Yes, it works very well for triggering animations in either scroll direction without inefficient polling. I use it on my own homepage for this same purpose.
I don't just use it for triggering animations though. I use it to calculate element position data. I pass that to the front end as CSS variables so you can create dynamic scroll animations like in the docs. So I'm not really using it as efficiently as I should be but after 30 versions, I think it is as optimised as I'll get it for the most part.
Ah, yes I see now, the animation state is based entirely on scroll position, not just triggered by it. Very interesting usage.