Lagging scroll with GSAP ScrollTrigger - React JS

[Wylerlight]

Hi All,

I'm messing around with Lenis and ScrollTrigger from GSAP. It seems like my screen is lagging when scrolling and I'm not quite sure how to fix it.
On other sites that utilizes Lenis scroll it's extremely smooth.
How do I alter my code to get it to scroll smooth along with animations and other CSS animations I plan to implement?

Example code below:

import { useState, useEffect } from 'react';
import { ReactLenis, useLenis } from 'lenis/react';
import TechStack from './Stack';

import './App.css';
import Lenis from 'lenis';

function App() {
  const [content, setContent] = useState('');

  
  const generateLongContent = () => {
    let longContent = '';
    for (let i = 0; i < 100; i++) {
      longContent +=
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. ';
    }
    setContent(longContent);
  };

  useEffect(() => {
  
    const lenis = new Lenis({
      duration: 1.2, 
      easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), 
      direction: 'vertical', 
      smooth: true, 
      smoothTouch: false, 
      touchMultiplier: 2, 
    });

    // Create a RAF loop to update Lenis
    function raf(time) {
      lenis.raf(time);
      requestAnimationFrame(raf);
    }

    requestAnimationFrame(raf);

   
    return () => {
      lenis.destroy();
    };
  }, []);

  return (
    <>
      <button onClick={generateLongContent}>Generate Long Content</button>
      <div style={{ height: '2000px' }}>{content}</div>
      <TechStack />
      <div className="gallery">
        <ul className="cards">
          <li>0</li>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
          <li>7</li>
          <li>8</li>
          <li>9</li>
          <li>10</li>
          <li>11</li>
          <li>12</li>
          <li>13</li>
          <li>14</li>
          <li>15</li>
          <li>16</li>
          <li>17</li>
          <li>18</li>
          <li>19</li>
          <li>20</li>
          <li>21</li>
          <li>22</li>
          <li>23</li>
          <li>24</li>
          <li>25</li>
          <li>26</li>
          <li>27</li>
          <li>28</li>
          <li>29</li>
          <li>30</li>
        </ul>
        <div className="actions">
          <button className="prev">Prev</button>
          <button className="next">Next</button>
        </div>
      </div>
    </>
  );
}

export default App;

[FokuspokusSB]

i had the same error. it turned out, that i had an error in my css.

this css fixed it for me:

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

And i use this js code:

import Lenis from "lenis";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { gsap } from "gsap";

gsap.registerPlugin(ScrollTrigger);

// [...]
  const lenis = new Lenis({
    duration: 2,
  });
  lenis.on("scroll", ScrollTrigger.update);

  gsap.ticker.add((time) => {
    lenis.raf(time * 1000);
  });

  gsap.ticker.lagSmoothing(0);

i hope it helps.

[Wylerlight]

Thanks!
I have the CSS and a slightly different version of the JS code. Your JS code looks to be smoother than mine though so that might be the trick right there.

Thanks again!

[perpetual-8]

thnaks helped me too