So I have a question on how to use this little bit of script in my react app.

  const tl = gsap.timeline({ defaults: { ease: "power1.out" } });

  tl.to("body", { overflow: "hidden" });
  tl.to(".text", { x: "0%", duration: 0.5 });
  tl.fromTo(
    ".textleft, .textright",
    { opacity: 0 },
    { x: "0%", opacity: 1, duration: 1.5 }
  );
  tl.to(".sliderasd", { y: "-100%", duration: 1.5, delay: 0.5 });
  tl.to(".intro", { y: "-100%", duration: 1 }, "-=1");
  tl.to(".newsletter-form", { y: "0%", duration: 1 }, "-=1");
  tl.to("body", { overflow: "", scrollTrigger: "body" });
  tl.fromTo(
    ".slideshow-container",
    { opacity: 0 },
    { opacity: 1, duration: 3 }
  );

It should be an intro animation to my website. I try to save it as a component and then export it to App.jsx but it doesnt seem to work. Of course i have imported GSAP.

Also when I put the code inside App function, it works only for one time and when i refresh the page nothing happens. The classes in the code are in different components.

I also have the same problem with slider I have created which seems to be working in non-react app.

Basiclly I would like to find out how can I use any JS script in my react app