[ScrollTrigger not working in react js]

The code is still not working when using useGSAP instead of useEffect
 

import React, { useEffect, useRef } from "react";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { useGSAP } from "@gsap/react";

gsap.registerPlugin(ScrollTrigger);
gsap.registerPlugin(useGSAP);
export default function TEST() {
  const boxRef = useRef(null);
  const oneRef = useRef(null);
  const twoRef = useRef(null);
  const threeRef = useRef(null);
  const fourRef = useRef(null);
 
  useGSAP(() => {
   
      gsap.to(boxRef.current, {
        x: rotation,
        scrollTrigger: {
          trigger: trigger,
          start: "top top",
          end: "bottom top",
          scrub: true,
        },
        duration: 2,
      });

    rotateAnimation(oneRef.current, 90);
    rotateAnimation(twoRef.current, 180);
    rotateAnimation(threeRef.current, 270);
    rotateAnimation(fourRef.current, 360);
  }, []);

  return (
    <div className="h-screen w-screen overflow-scroll overflow-x-hidden scrollbar-thin">
      <div
        ref={boxRef}
        className="box top-96 left-96 fixed h-14 w-14 bg-black"
      ></div>
      <div ref={oneRef} className="one h-screen w-full bg-white"></div>
      <div ref={twoRef} className="two h-screen w-full bg-slate-600"></div>
      <div ref={threeRef} className="three h-screen w-full bg-red-600"></div>
      <div ref={fourRef} className="four h-screen w-full bg-yellow-600"></div>
    </div>
  );
}

 

[ScrollTrigger not working in react js]

import React, { useEffect, useRef } from "react";

import gsap from "gsap";

import { ScrollTrigger } from "gsap/ScrollTrigger";

 

gsap.registerPlugin(ScrollTrigger);

export default function TEST() {

  const boxRef = useRef(null);

  const oneRef = useRef(null);

  const twoRef = useRef(null);

  const threeRef = useRef(null);

  const fourRef = useRef(null);

 

  useEffect(() => {

    // Register ScrollTrigger

 

    // Animation for rotation at each section

    const rotateAnimation = (trigger, rotation) => {

      gsap.fromTo(boxRef.current, {rotation:0},{

        rotation: rotation,

        scrollTrigger: {

          trigger: trigger,

          start: "top top",

          end: "bottom top",

          scrub: true,

         

        },

        duration:2,

      });

    };

 

    // Apply animations for each section

    rotateAnimation(oneRef.current, 90);

    rotateAnimation(twoRef.current, 180);

    rotateAnimation(threeRef.current, 270);

    rotateAnimation(fourRef.current, 360);

  }, []);

 

  return (

    <div className="h-screen w-screen overflow-scroll overflow-x-hidden scrollbar-thin">

      <div

        ref={boxRef}

        className="box top-96 left-96 fixed h-14 w-14 bg-black"

      ></div>

      <div ref={oneRef} className="one h-screen w-full bg-white"></div>

      <div ref={twoRef} className="two h-screen w-full bg-slate-600"></div>

      <div ref={threeRef} className="three h-screen w-full bg-red-600"></div>

      <div ref={fourRef} className="four h-screen w-full bg-yellow-600"></div>

    </div>

  );

}