How can i fix gsap.from() is not completing animation in react.

i need to change background-color red to normal (png image) but its stop immediately the animation

here is the screenshot of the animation broken.

Here is my code.

import { useRef, useEffect } from "react";
import gsap from "gsap";
import reactLogo from "./assets/react.svg";
import "./App.css";

function App() {
  const img = useRef(null);

  useEffect(() => {
    gsap.from(img.current, { duration: 1, backgroundColor: "red" });
  }, []);

  return (
    <div className="App">
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src="/vite.svg" className="logo" alt="Vite logo" />
        </a>
        <a
          href="https://reactjs.org"
          target="_blank"
        >
          <img
            ref={img}
            src={reactLogo}
            className="logo react"
            alt="React logo"
          />
        </a>
      </div>
      <h1>Vite   React</h1>
    </div>
  );
}

export default App;

package.json

{
  "name": "gsap-test",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "gsap": "^3.10.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.15",
    "@types/react-dom": "^18.0.6",
    "@vitejs/plugin-react": "^2.0.0",
    "vite": "^3.0.0"
  }
}

CodePudding user response：

This is due to react 18's 'strict mode' only on development.

To fix this

useLayoutEffect(() => {
    let from = gsap.from(elem0.current, {
      rotation: 360,
      immediateRender: false
    });

    return () => {
      from.kill();
    };
  });

from gsap forums