This content originally appeared on DEV Community and was authored by iDev-Games
Ever wanted to achieve that elastic rubber banding effect when scrolling to the top or bottom of a page? 🤯 With Trig.js, it's possible with the default CSS classes trig-scroll-top and trig-scroll-bottom. Let's dive in! 🔥
🎬 The Effect in Action
Here's what we'll be creating:
➡️ When scrolling to the top, elements stretch down and snap back.
➡️ When scrolling to the bottom, elements stretch up before snapping.
Check out the demo: CodePen Example
🛠️ Setting It Up (Super Simple!)
1️⃣ Include Trig.js
If you haven’t already, grab Trig.js:
<script src="https://cdn.jsdelivr.net/npm/trig-js/src/trig.min.js"></script>
Or install via npm:
npm install trig-js
2️⃣ Style the Rubber Banding Effect with CSS
Now, let’s add some simple CSS magic to create the stretch effect:
.trig-scroll-top .pageContainer{
animation:rubberBandTop 1.5s ease-out;
}
.trig-scroll-bottom .pageContainer{
animation:rubberBandBottom 1.5s ease-out;
}
@keyframes rubberBandTop {
10% {
transform:translateY(0px);
}
20% {
transform:translateY(100px);
}
40% {
transform:translateY(-20px);
}
60% {
transform:translateY(40px);
}
100% {
transform:translateY(0px);
}
}
@keyframes rubberBandBottom {
10% {
transform:translateY(0px);
}
20% {
transform:translateY(-100px);
}
40% {
transform:translateY(20px);
}
60% {
transform:translateY(-40px);
}
100% {
transform:translateY(0px);
}
}
🏆 Why Use Trig.js for This?
✅ CSS-only animations → super smooth 💨
✅ Lightweight (4KB!) → perfect for mobile 📱
This technique is perfect for mobile web apps, iOS-style scroll effects, or just making your site feel extra polished. ✨
💬 What Do You Think?
Would you use this in your next project? Let me know in the comments! 🔥
And if you found this useful, drop a ⭐ on Trig.js on GitHub! 🚀
This content originally appeared on DEV Community and was authored by iDev-Games
iDev-Games | Sciencx (2025-03-21T21:08:34+00:00) 📱 Mobile Rubber Banding Effect with Trig.js. Retrieved from https://www.scien.cx/2025/03/21/%f0%9f%93%b1-mobile-rubber-banding-effect-with-trig-js/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.