Traté de hacer una versión simplificada de lo que experimenté en otro proyecto usando GSAP. Esencialmente recibo 2 advertencias en la consola.
Objetivo GSAP indefinido no encontrado.
Objetivo GSAP no encontrado.
Traté de hacer un modal que representará si el estado es igual a verdadero. De lo contrario, devolverá nulo.
Creo que mi problema se debe a que devuelve nulo. Pero no sé cómo hacerlo de otra manera.
Experimenté con la opción kill() en gsap, pero no tuve suerte. Aquí está la referencia de los documentos que leí. Documentos de Gsap sobre limpieza
import React, { useRef, useEffect } from "react"; import gsap from "gsap"; export default function TestGsap(props) { const box = useRef(); useEffect(() => { gsap.from(box.current, { y: "500", ease: "expo", duration: 2, }); }); if (props.toggleModal === true) { return ( <div> <section ref={box} style={{ width: "10rem", height: "10rem", backgroundColor: "red" }} > <p>Hello, I am a red box.</p> </section> </div> ); } else { return null; } }Publiqué esto también en los foros de Greensock. Gracias a OSUblake, un administrador de Greensock, pudo resolver mi problema. Para ayudar a otros esto es lo que dijo.
Su efecto se ejecuta cada vez que cambian los accesorios, por lo que creará una nueva animación cada vez, por lo que, por supuesto, no se encontrará el objetivo si no se representa. Tendrías que hacer algo como esto.
useLayoutEffect(() => { if (props.toggleModal) { gsap.from(box.current, { ... }); } }, [props.toggleModal])Puede importar useLayoutEffect desde reaccionar.
Consulte nuestra Guía de reacción para obtener más información. https://greensock.com/react/