📱 Mobile Rubber Banding Effect with Trig.js

#webdev #showdev #animation #beginners

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

DEV Community