Así que tengo una pregunta sobre cómo usar este pequeño script en mi aplicación de reacción.

 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 } );

Debería ser una animación de introducción a mi sitio web. Intento guardarlo como un componente y luego exportarlo a App.jsx pero parece que no funciona. Por supuesto que he importado GSAP.

Además, cuando coloco el código dentro de la función de la aplicación, funciona solo una vez y cuando actualizo la página no sucede nada. Las clases en el código están en diferentes componentes.

También tengo el mismo problema con el control deslizante que he creado, que parece estar funcionando en una aplicación que no reacciona.

Básicamente, me gustaría saber cómo puedo usar cualquier script JS en mi aplicación de reacción.