CODEWITHSUNDEEP
javascriptreactjslottie
Smlok
Smlok

Reputation: 658

Targeting specific Lottie animations on hover with lottie-web in React

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.

Upvotes: 2

Views: 3028

Answers (1)

Smlok
Smlok

Reputation: 658

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;

Upvotes: 1

Related Questions