Performances issue with Lenis , GSAP & R3F on mobile

[aronanol45]

Hi , currently working on a webgl project using r3f ( any problem with that) , GSAP for animations, and Lenis for smoothing.
On mobile I got some small fps drop ( from 60fps when not scrolling to 40 while scrolling)
Here my setup with Lenis & GSAP :

import Lenis from "@studio-freight/lenis";
import gsap from "gsap";
import ScrollTrigger from "gsap/dist/ScrollTrigger";
import { useEffect, useLayoutEffect } from "react";

gsap.registerPlugin(ScrollTrigger);
function SmoothScrolling({ children }) {
  useEffect(() => {
    const wrapper = document.querySelector(".scrollWrapper");
    const content = document.querySelector(".scrollContent");

    const lenis = new Lenis({
      wrapper: wrapper,
      content: content,
      duration: 3,
      smoothTouch: false,
      touchMultiplier: 1.1,
      direction: "vertical",
      gestureDirection: "vertical",
      syncTouch: true,
      easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
      eventsTarget: document.documentElement,
    });

    // Synchronize Lenis scrolling with GSAP's ScrollTrigger plugin
    lenis.on("scroll", () => {
      ScrollTrigger.update();
    });

    // Add Lenis's requestAnimationFrame (raf) method to GSAP's ticker
    // This ensures Lenis's smooth scroll animation updates on each GSAP tick
    gsap.ticker.add((time) => {
      lenis.raf(time * 1000); // Convert time from seconds to milliseconds
    });

    // Disable lag smoothing in GSAP to prevent any delay in scroll animations
    gsap.ticker.lagSmoothing(0);

    ScrollTrigger.defaults({ scroller: wrapper });

    ScrollTrigger.config({
      limitCallbacks: true,
      ignoreMobileResize: true,
      autoRefreshEvents: "DOMContentLoaded,load,resize",
    });

    //ScrollTrigger.normalizeScroll({ target: 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,
        };
      },
    });
  }, []);

  return;
}

export default SmoothScrolling;

I basically use a proxy to avoid the adressbar to show/hide, everything is perfect on desktop, but a real strugge to maintain "smoothness" on mobile, I added syncTouch: true, it fixed my fps drop occuring while scrolling, but I loose the "smooth" effect of lenis, and sometime it seems I loose the scroll focus on the page ( jumps between sections etc)

[clementroche]

Please use lenis instead of @studio-freight/lenis. Then be sure that the issue still persists if you remove ScrollTrigger.

[aronanol45]

Thanks ! It work better!

[feledori]

please move from the deprecated package "@studio-freight/lenis" to the "lenis" package and use our "lenis/react" integration. as a guess, the performance issue probably lies within the 3d scene rather then lenis.

[aronanol45]

I tried to implement the same logic with scroll proxy :

"use client";
import { isTouchDevice } from "@/Components/Dom/utils/checkIfMobile";
import ReactLenis from "@studio-freight/react-lenis";
import { useEffect, useRef } from "react";
import gsap from "gsap";
import ScrollTrigger from "gsap/dist/ScrollTrigger";
import { useGSAP } from "@gsap/react";

gsap.registerPlugin(ScrollTrigger);

const ReactLenisGSAPProxy = ({ children }) => {
  const lenisRef = useRef(null);
  const wrapper = useRef(null);
  const content = useRef(null);

  useEffect(() => {
    // Synchronize Lenis scrolling with GSAP's ScrollTrigger plugin
    lenisRef.current?.on("scroll", () => {
      ScrollTrigger.update();
    });

    // Add Lenis's requestAnimationFrame (raf) method to GSAP's ticker
    // This ensures Lenis's smooth scroll animation updates on each GSAP tick
    gsap.ticker.add((time) => {
      lenisRef.current?.raf(time * 1000); // Convert time from seconds to milliseconds
    });

    // Disable lag smoothing in GSAP to prevent any delay in scroll animations
    gsap.ticker.lagSmoothing(0);

    ScrollTrigger.defaults({ scroller: wrapper.current });

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

  return (
    <ReactLenis
      ref={lenisRef}
      options={{
        autoRaf: false,
        wrapper: wrapper.current,
        content: content.current,
        duration: isTouchDevice() ? 1.5 : 3,
        smoothTouch: true,
        touchMultiplier: 1.0,
        touchInertiaMultiplier: 50,
        direction: "vertical",
        gestureDirection: "vertical",
        syncTouch: true,
        easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
        eventsTarget: document.documentElement,
      }}
    >
      <div className="scrollWrapper" ref={wrapper}>
        <div
          className="scrollContent"
          ref={content}
          style={{
            backgroundRize: "40px 40px",
            backgroundImage:
              "linear-gradient(to right, grey 1px, transparent 1px), linear-gradient(to bottom, grey 1px, transparent 1px)",
          }}
        >
          {children}
        </div>
      </div>
    </ReactLenis>
  );
};

export default ReactLenisGSAPProxy;

<ReactLenisGSAPProxy>
... here my content
</ReactLenisGSAPProxy>

It seems that : TypeError: _lenisRef_current.on is not a function
Sorry if it's trivial , but dont really understand the abstraction behind this one, why it dont work like that

[feledori]

you are still using the deprecated package. please use the lenis package not @studio-freight/lenis.

[aronanol45]

Hi, hope you're doing well!
Now I am using the lenis/react lib.
Struggling to setup the instance , actually got this error :

TypeError: _lenisRef_current.raf is not a function

  29 |     gsap.ticker.add((time) => {
> 30 |       lenisRef.current?.raf(time * 1000);
     |                         ^
  31 |     });

It's a little bit counter-intuitive if the lenisRef dont refer to the main instance

import { isTouchDevice } from "@/Components/Dom/utils/checkIfMobile";
import { ReactLenis, useLenis } from "lenis/react";
import { useEffect, useRef } from "react";
import gsap from "gsap";
import ScrollTrigger from "gsap/dist/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

const ReactLenisGSAPProxy = ({ children }) => {
  const lenisRef = useRef();
  const wrapper = useRef(null);
  const content = useRef(null);

  const lenis = useLenis(({ scroll }) => {
    // suppose need to update here the ScrollTriggers
    ScrollTrigger.update();
  });

  useEffect(() => {
    // Synchronize Lenis scrolling with GSAP's ScrollTrigger plugin
    /*
    Old way used without lenis/react to update ScrollTrigger
    lenisRef.current?.on("scroll", () => {
      ScrollTrigger.update();
    });
    */
    // Add Lenis's requestAnimationFrame (raf) method to GSAP's ticker
    // This ensures Lenis's smooth scroll animation updates on each GSAP tick
    gsap.ticker.add((time) => {
      lenisRef.current?.raf(time * 1000);
    });

    // Disable lag smoothing in GSAP to prevent any delay in scroll animations
    gsap.ticker.lagSmoothing(0);

    ScrollTrigger.defaults({ scroller: wrapper.current });

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

  return (
    <ReactLenis
      ref={lenisRef}
      options={{
        autoRaf: false,
        wrapper: wrapper.current,
        content: content.current,
        duration: isTouchDevice() ? 1.5 : 3,
        smoothTouch: true,
        touchMultiplier: 1.0,
        touchInertiaMultiplier: 50,
        direction: "vertical",
        gestureDirection: "vertical",
        syncTouch: true,
        easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
        //eventsTarget: document.documentElement,
      }}
    >
      <div className="scrollWrapper" ref={wrapper}>
        <div className="scrollContent" ref={content}>
          {children}
        </div>
      </div>
    </ReactLenis>
  );
};

export default ReactLenisGSAPProxy;

Thanks for your help !

[clementroche]

@aronanol45 https://github.com/darkroomengineering/lenis/blob/main/packages/react/README.md#gsap-integration

lenisRef.current?.lenis?.raf(time * 1000)

lenisRef refers to the ReactLenis component that includes: wrapper element, content element and lenis instance

[aronanol45]

Thank you for your help @clementroche ! <3