GSAP ScrollTrigger is not working with ReactJS

Question

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(() => {
    const rotateAnimation = (trigger, rotation) => {
      gsap.to(boxRef.current, {
        rotation: 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>
  );
}

This is my code and no matter what I do the box is not rotating according to my scroll. I have tried to implement it using classnames instead of refs but it is not working.

I have tried useGSAP instead of useEffect but the results are same.

Mohammed Abzal · Accepted Answer · 2024-07-17 12:35:37Z

Replace rotation by rotate!

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

gsap.registerPlugin(ScrollTrigger);

const page = () => {
  const boxRef = useRef(null);
  const oneRef = useRef(null);
  const twoRef = useRef(null);
  const threeRef = useRef(null);
  const fourRef = useRef(null);

  useEffect(() => {
    const rotateAnimation = (trigger, rotation) => {
      gsap.to(boxRef.current, {
        rotate: rotation,
        scrollTrigger: {
          trigger: trigger,
          start: "top top",
          end: "bottom top",
          scrub: true,
          markers: 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-clip scrollbar-thin border border-red-500">
        <div
          ref={boxRef}
          className="box top-96 left-96 fixed h-14 w-14 bg-red-500"
        ></div>
        <div ref={oneRef} className=" h-screen w-full bg-white"></div>
        <div ref={twoRef} className="h-screen w-full !bg-slate-600"></div>
        <div ref={threeRef} className=" h-screen w-full bg-red-600"></div>
        <div ref={fourRef} className=" h-screen w-full bg-yellow-600"></div>
      </div>
    </>
  );
};

export default page;

Collectives™ on Stack Overflow

GSAP ScrollTrigger is not working with ReactJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related