GSAP's ScrollTrigger doesnt work with Lenis and Scroller Proxy

February 15

Hi guys, hope you're doing well.

Trying to achieve a gsap scrollTriggers animations with Lenis and using scroller proxy to avoid performance issues on the main project.

Here my code :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>HTML + CSS</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <style>
    html,
    body {
      height: 100%;
      overflow: hidden;
      font-family: sans-serif;
    }
    .scrollWrapper {
      height: 100vh;
      overflow: hidden;
      position: absolute;
      top: 0;
    }

    .scrollContent {
      height: 100%;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
    }

    section {
      width: 100vw;
      max-width: 100%;
      height: 100vh;
      display: flex;
    }

    section h2 {
      align-self: center;
    }
  </style>
  <body>
    <div class="scrollWrapper">
      <div class="scrollContent">
        <section><h2>My Title 0</h2></section>
        <section style="background: red"><h2>My Title 1</h2></section>
        <section style="background: blue"><h2>My Title 2</h2></section>
        <section><h2>My Title 3</h2></section>
        <section><h2>My Title 4</h2></section>
        <section><h2>My Title 5</h2></section>
        <section><h2>My Title 6</h2></section>
        <section><h2>My Title 7</h2></section>
        <section><h2>My Title 8</h2></section>
        <section><h2>My Title 9</h2></section>
        <section><h2>My Title 10</h2></section>
      </div>
    </div>
  </body>
  <script
    src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"
    integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg=="
    crossorigin="anonymous"
    referrerpolicy="no-referrer"
  ></script>
  <script
    src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"
    integrity="sha512-onMTRKJBKz8M1TnqqDuGBlowlH0ohFzMXYRNebz+yOcc5TQr/zAKsthzhuv0hiyUKEiQEQXEynnXCvNTOk50dg=="
    crossorigin="anonymous"
    referrerpolicy="no-referrer"
  ></script>
  <script src="https://cdn.jsdelivr.net/npm/@studio-freight/[email protected]/dist/lenis.min.js"></script>
  <script>
    gsap.registerPlugin(ScrollTrigger);

    const wrapper = document.querySelector(".scrollWrapper");
    const content = document.querySelector(".scrollContent");

    const lenis = new Lenis({
      wrapper: wrapper,
      content: content,
      duration: 2,
      easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
      eventsTarget: document.documentElement,
    });

    function raf(time) {
      lenis.raf(time);
      ScrollTrigger.update();
      requestAnimationFrame(raf);
    }

    requestAnimationFrame(raf);

    ScrollTrigger.defaults({ scroller: wrapper });

    ScrollTrigger.scrollerProxy(wrapper, {
      scrollTop(value) {
        return arguments.length
          ? lenis.scrollTo(value, { duration: 0, immediate: true })
          : lenis.scroll;
      },
      getBoundingClientRect() {
        return {
          top: 0,
          left: 0,
          width: window.innerWidth,
          height: window.innerHeight,
        };
      },
    });

    const sections = gsap.utils.toArray("section");
    sections.map((section, index) => {
      let tl = gsap.timeline({
        duration: 1,
        scrollTrigger: {
          trigger: section,
          markers: true,
          scrub: true,
          start: "top bottom",
          end: "top top",
        },
      });
      tl.from(section, { opacity: 0, duration: 1 });
    });
  </script>
</html>

And here the live demo : https://codesandbox.io/p/sandbox/m87qzq?file=%2Findex.html%3A1%2C1-127%2C1, as you can see , when I open the console I see the opacity on sections moving, I also see them ( blue overlay) moving, but they dont appear on the screen. And on mobile the markers dont move, I guess I did something wrong in the setup and gsap dont refresh well, or dont detect the scroll on the right element.

My goal is to use this idea to avoid using gsap.normalizeScroll and Lenis.syncTouch, these two options dont fit well with webgl background, create some delay and jitterings. So my idea was to use a scroller proxy as you see in my code, and update my webgl at the same place where I update the ScrollTrigger.update(), and lenis.raf(), I guess it's a potential good way to achieve fine and smooth animations and preserving good fps.

Thanks you guys!

February 16

Hi,

I have no experience with Lenis, but it seems that everything in your HTML has overflow hidden applied to it, that kind of contradicts this demo we have that uses Lenis:

See the Pen OPLQbYm by GreenSock (@GreenSock) on CodePen.

As per avoiding the mobile address bar from showing/hiding, the only solution we have for that is normalizeScroll, so you'll have to find a different approach by yourself I'm afraid since we already have one in place. Also why not use ScrollSmoother? Your Club GSAP membership level gives you access to it 🤷‍♂️

Another thing you can try is the ignoreMobileResize config option:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.config()#details

Hopefully this helps

Happy Tweening!

Notifications

Messages

GSAP's ScrollTrigger doesnt work with Lenis and Scroller Proxy

Recommended Posts

aronanol

Rodrigo

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members