📱 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
<br />

Setting It Up (Super Simple!)

Include Trig.js

If you haven’t already, grab Trig.js:

"https://cdn.jsdelivr.net/npm/trig-js/src/trig.min.js">

Or install via npm:

npm install trig-js

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);
  }
}