gsap.from() method is not working in reactjs

[tst-flopp]

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

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

  useEffect(() => {
    gsap.from(img.current, { duration: 1, opacity: 0 });
  });

  const appStyle = {
    display: "grid",
    placeItems: "center",
    minHeight: "100vh",
    backgroundColor: "black",
    margin: "0",
  };

  const imgStyle = {
    width: "250px",
  };

  return (
    <div className="App" style={appStyle}>
      <img
        ref={img}
        src={reactLogo}
        className="logo react"
        alt="React logo"
        style={imgStyle}
      />
    </div>
  );
}

export default App;

This was my react code. other methods are working fine and in normal html javascript is fine also . but this one is not (gsap.from()). i am using vitejs as build tool. how can i fix this.

[Cassie]

Hey there - this is due to react 18's 'strict mode'

It's a change in how React works - not a GSAP bug.

More in the thread here - 
 

fix - 

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

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

 

[tst-flopp]

Cassie Evans thanks a lot this help me a lot.