CODEWITHSUNDEEP
javascriptreactjsgsap
Ian
Ian

Reputation: 47

GSAP & ReactJs. Console warnings: GSAP target undefined not found. & GSAP target not found

I tried to make a simplified version of what I experienced in another project with using GSAP. Essentially I get 2 warning in the console.

GSAP target undefined not found.

GSAP target not found.

I tried to make a modal that it will render if the state is equal to true. Else it will return null.

I believe my issue is due to returning null. But I don't know how to do this another way.

I experimented with the kill() option in gsap, but I had no luck with it. Here is the reference from the docs that I read. Gsap Docs about Cleanup

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

export default function TestGsap(props) {
  const box = useRef();

  useEffect(() => {
    gsap.from(box.current, {
      y: "500",
      ease: "expo",
      duration: 2,
    });
  });

  if (props.toggleModal === true) {
    return (
      <div>
        <section
          ref={box}
          style={{ width: "10rem", height: "10rem", backgroundColor: "red" }}
        >
          <p>Hello, I am a red box.</p>
        </section>
      </div>
    );
  } else {
    return null;
  }
}

Upvotes: 0

Views: 2017

Answers (2)

Abhishek Patel
Abhishek Patel

Reputation: 51

There is an out of box hook provided by GSAP for implementation of GSAP Animations in frameworks and most importantly for react. As we have to maintain the clean up after the animations are finished. Sometimes it gets very tedious to handle the clean up for complex animations. I would strongly recommend using the useGSAP() hook by @gsap/react package.

Refer to the below link for more detailed documentation. Hope it'll solve the issue. :) useGSAP()

Upvotes: 0

Ian
Ian

Reputation: 47

I posted this also on Greensock forums. Thanks to OSUblake an Admin over at Greensock, he was able to solve my issue. To help others here's what he said.

Your effect is running every time the props changes, so you're going to create a new animation every time, so of course the target will not be found if it's not rendered. You would need to do something like this.

useLayoutEffect(() => {
  if (props.toggleModal) {
    gsap.from(box.current, {
      ...
    });
  }
}, [props.toggleModal])

You can import useLayoutEffect from react.

Please check out our React Guide for more information. https://greensock.com/react/

Upvotes: 2

Related Questions