Scrolltrigger does not work properly when used with ReactJS

[Andree Luong]

I'm new to GreenSock and I encountered a rather confusing error when using scroll triggers with reactjs.
Same JSX code but I get two different results on Codeandbox and on vscode, I'm not sure if this is a bug on my dev environment so here is the video I recorded the error:
https://streamable.com/m0kvca

here is my code on Codeandbox, everything is very similar and there is no difference but the result is different: :Codeandbox link
 

here is my code in app.js file

 

import React, { useEffect, useState, useRef } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);
function App() {
  const menuRef = useRef(null);
  const leftRef = useRef(null);

  useEffect(() => {
    (async () => {
      const LocomotiveScroll = (await import("locomotive-scroll")).default;
      const locomotiveScroll = new LocomotiveScroll();
    })();
  }, []);
  useEffect(() => {
    const menuElement = menuRef.current;
    const leftElement = leftRef.current;
    if (menuElement && leftElement) {
      ScrollTrigger.create({
        trigger: menuElement,
        start: "top top",
        end: "bottom bottom",
        pin: leftElement,
        markers: true,
      });
      ScrollTrigger.refresh();
    }
  }, []);
  return (
    <div>
      <div style={{ height: "50vh" }}></div>
      <div>
        <div
          ref={menuRef}
          style={{
            display: "flex",
            border: "2px",
            borderStyle: "solid",
            gap: "20px",
          }}
        >
          <div
            ref={leftRef}
            style={{ width: "30%", height: "50vh", backgroundColor: "#ff0" }}
          >
            <div style={{ padding: "20px" }}>1</div>
            <div style={{ padding: "20px" }}>2</div>
            <div style={{ padding: "20px" }}>3</div>
            <div style={{ padding: "20px" }}>4</div>
            <div style={{ padding: "20px" }}>5</div>
          </div>
          <div style={{ width: "70%" }}>
            <div style={{ height: "50vh", background: "#ddd" }}></div>
            <div style={{ height: "50vh", background: "#ff0" }}></div>
            <div style={{ height: "50vh", background: "#0ff" }}></div>
            <div style={{ height: "50vh", background: "#0f0" }}></div>
            <div style={{ height: "50vh", background: "#333" }}></div>
          </div>
        </div>
      </div>
      <div style={{ height: "50vh", background: "#333" }}>1</div>
      <div style={{ height: "50vh", background: "#555" }}>2</div>
      <div style={{ height: "50vh", background: "#777" }}>3</div>
      <div style={{ height: "50vh", background: "#999" }}>4</div>
    </div>
  );
}

export default App;

 

làm ơn giúp tôi
 

[GreenSock]

It looks like you're not doing proper cleanup in your useEffect() hook. Keep in mind that in React 18+, at least in strict mode, it'll call your useEffect() TWICE which may result in duplicate ScrollTriggers or animations being created. 

 

I would STRONGLY recommend reading this article: https://gsap.com/react

 

You should be able to just use the new useGSAP() hook from @gsap/react and swap that in for useEffect(). If you're still having trouble please make sure you provide a minimal demo that clearly illustrates the issue. Here's a Stackblitz starter demo that you can fork: 

https://stackblitz.com/edit/react-cxv92j

 

I hope that helps!