Lenis with gsap and custom RAF #438

mkurtic · 2025-02-14T19:36:54Z

mkurtic
Feb 14, 2025

Hi guys, hope you're doing well.
Currently working on a gsap, lenis and three.js setup.
On mobile gsap create jittering, found a way to fix that by adding overflow:hidden to the html tag, and scrolling trough the body.
Here my current code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

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

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

    h2 {
      text-align: center;
      align-self: center;
      width: 100vw;
      height: 100vh;
    }
    .canvas {
      position: fixed;
      top: 0;
      left: 0;
      z-index: -1;
      background: yellow;
      width: 100vw;
      height: 100vh;
    }
  </style>
  <body>
    <div class="canvas"></div>
    <div class="page">
      <section><h2>Hello 0</h2></section>
      <section><h2>Hello 1</h2></section>
      <section><h2>Hello 2</h2></section>
      <section><h2>Hello 3</h2></section>
      <section><h2>Hello 4</h2></section>
      <section><h2>Hello 5</h2></section>
      <section><h2>Hello 6</h2></section>
      <section><h2>Hello 7</h2></section>
      <section><h2>Hello 8</h2></section>
      <section><h2>Hello 9</h2></section>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@studio-freight/lenis@1.0.42/dist/lenis.min.js"></script>
    <script>
      gsap.registerPlugin(ScrollTrigger);

      const sections = gsap.utils.toArray("section");
      const titles = gsap.utils.toArray("h2");

      sections.map((sec, index) => {
        const tl = gsap.timeline({
          duration: 1,
          scrollTrigger: {
            trigger: sec,
            start: "top 50%",
            end: "top top",
            scrub: true,
            markers: true,
            onUpdate: (self) => {
              console.log("to anim title", titles[index]);
              console.log("scrollTrigger" + index, self.progress);
            },
          },
        });
        tl.fromTo(
          titles[index],
          { opacity: 0 },
          { opacity: 1, duration: 1 },
          0
        );
      });

      // Initialize a new Lenis instance for smooth scrolling
      /*
      const lenis = new Lenis({
        duration: 3,
        wrapper: document.documentElement,
        content: document.body,
        documentElement: document.documentElement,
      });
      console.log(lenis, "lenis");
      */

      const update = (time) => {
        //lenis.raf(time); // Convert time from seconds to milliseconds
        ScrollTrigger.update(); // here update ScrollTriggers

        requestAnimationFrame(update);
      };
      requestAnimationFrame(update);
    </script>
  </body>
</html>

Here if i remove lenis, everything works perfect, gsap scrollTrigger works, if I remove the comments to let lenis launch, nothing works anymore. I tried also by adding wrapper: document.documentElement, content: document.body to lenis setup but still nothing.
My idea is to update lenis, gsap , and three.js on the same RAF, so trying to get sync and avoid "jitterings" on mobile devices.
Here one quick preview: https://codesandbox.io/p/sandbox/nskhzh?file=%2Findex.html%3A1%2C1-116%2C1
Thanks guys!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Lenis with gsap and custom RAF #438

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Uh oh!

Lenis with gsap and custom RAF #438

Uh oh!

Uh oh!

mkurtic Feb 14, 2025

Replies: 0 comments

mkurtic
Feb 14, 2025