How to target with hover a specific animation when I have multiple lottie animations on the same page in React using lottie-web. lottie-web documentation states that in the lottie.play() I can insert a name parameter to target a specific animation, so I did this lottie.play(container), but it didn't work.
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;
The result on my code is that no matter which animation I hover on both animations will play.
Here is a codesandbox link.
Ok I dug deeper while waiting for answers and found that I need to give a name to each animation instead of using the container name like so name: "animationOne" and refer to it later, so my code would look like this:
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;