CODEWITHSUNDEEP
reactjsgsapscrolltrigger
SaUrAv kS
SaUrAv kS

Reputation: 1

GSAP ScrollTrigger is not working with ReactJS

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.

Upvotes: 0

Views: 60

Answers (1)

Mohammed Abzal
Mohammed Abzal

Reputation: 21

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;

Upvotes: 0

Related Questions