📱 Mobile Rubber Banding Effect with Trig.js

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! 🚀