Cómo apuntar al pasar el mouse sobre una animación específica cuando tengo varias animaciones de lottie en la misma página en React usando lottie-web . La documentación de lottie-web establece que en lottie.play() puedo insertar un parámetro de nombre para apuntar a una animación específica, así que hice este lottie.play(container) , pero no funcionó.
import React, { useEffect, useRef } from "react"; import lottie from "lottie-web"; function App() { const containerOne = useRef(null); const containerTwo = useRef(null); useEffect(() => { lottie.loadAnimation({ container: containerOne.current, renderer: "svg", loop: true, autoplay: false, animationData: require("./office.json") }); lottie.loadAnimation({ container: containerTwo.current, renderer: "svg", loop: true, autoplay: false, animationData: require("./office.json") }); return () => { lottie.destroy(); }; }, []); return ( <div className="App"> <h1>React Lottie Demo</h1> {/* First lottie */} <div ref={containerOne} onMouseEnter={() => lottie.play()} onMouseLeave={() => lottie.pause()} /> {/* Second lottie */} <div ref={containerTwo} onMouseEnter={() => lottie.play()} onMouseLeave={() => lottie.pause()} /> </div> ); } export default App;El resultado en mi código es que no importa en qué animación pase el mouse sobre ambas animaciones se reproducirán.
Aquí hay un enlace de codesandbox .
Ok, profundicé más mientras esperaba respuestas y descubrí que necesito dar un nombre a cada animación en lugar de usar el nombre del contenedor como name: "animationOne" y consultarlo más tarde, por lo que mi código se vería así:
import React, { useEffect, useRef } from "react"; import lottie from "lottie-web"; function App() { const containerOne = useRef(null); const containerTwo = useRef(null); useEffect(() => { lottie.loadAnimation({ name:"animationOne", container: containerOne.current, renderer: "svg", loop: true, autoplay: false, animationData: require("./office.json") }); lottie.loadAnimation({ name:"animationTwo", container: containerTwo.current, renderer: "svg", loop: true, autoplay: false, animationData: require("./office.json") }); return () => { lottie.destroy(); }; }, []); return ( <div className="App"> <h1>React Lottie Demo</h1> {/* First lottie */} <div ref={containerOne} onMouseEnter={() => lottie.play("animationOne")} onMouseLeave={() => lottie.pause("animationOne")} /> {/* Second lottie */} <div ref={containerTwo} onMouseEnter={() => lottie.play("animationTwo")} onMouseLeave={() => lottie.pause("animationOne")} /> </div> ); } export default App;