[ScrollTrigger is not working?]

here the codesandbox  link

[ScrollTrigger is not working?]

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.

 

 

[gsap.from() method is not working in reactjs]

Cassie Evans thanks a lot this help me a lot.

[gsap.from() method is not working in reactjs]

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.