SauravKS

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> ); }

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> ); }