tst-flopp

here the codesandbox link

import gsap from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import { useLayoutEffect } from "react"; gsap.registerPlugin(ScrollTrigger); function Home() { useLayoutEffect(() => { let tl = gsap.timeline({ defaults: { immediateRender: false, }, }); tl.to(".animaition-112", { opacity: 1, y: 0, scrollTrigger: { trigger: ".animaition-112", start: "top center", end: "center 30%", markers: true, }, }); return () => { tl.kill(); }; }, []); return <></> } why scrolltrigger animation is not working and triggering mechanism is worked and there is no transition. if i leave timeline and use gsap.to() that will work what can i do there. help please.

Cassie Evans thanks a lot this help me a lot.

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.