How to use one animation with multiple element

My problem: I’m using lottie-web with reactjs. But i want use one animation with multiple element. Example: Like of posts, animation of like depends on the State being passed. It didn’t work as expected

My code: App.js:

const [isLiked, setLike] = useState(true);
  const [isLiked2, setLike2] = useState(false);
  return (
    <div className="App">
      <h1>Demo Animation</h1>
      <Like isLiked={isLiked} />
      <button
        onClick={() => setLike(!isLiked)}
        style={{ color: isLiked ? "green" : null }}
      >
        Like
      </button>
      <Like isLiked={isLiked2} />
      <button
        onClick={() => setLike2(!isLiked2)}
        style={{ color: isLiked2 ? "green" : null }}
      >
        Like2
      </button>
    </div>
  );

Like.js:

let likeAnimObj = null;

export default function Like({ isLiked }) {
  const container = useRef(null);
  const loadAnimation = () => {
    likeAnimObj = lottie.loadAnimation({
      container: container.current, // the dom element that will contain the animation
      renderer: "svg",
      loop: false,
      autoplay: false,
      animationData: animationLike // the path to the animation json
    });
  };
  useEffect(() => {
    loadAnimation();
    isLiked
      ? likeAnimObj.goToAndStop(60, true)
      : likeAnimObj.goToAndStop(0, true);
  }, []);

  const firstUpdate = useRef(true);
  useEffect(() => {
    if (firstUpdate.current) {
      firstUpdate.current = false;
      return;
    }
    likeAnimObj.destroy();
    loadAnimation();
    isLiked
      ? likeAnimObj.playSegments([0, 60], true)
      : // : likeAnimObj.playSegments([60, 110], true);
        likeAnimObj.goToAndStop(0, true);
  }, [isLiked]);

  return <div style={{ width: 200, margin: "0 auto" }} ref={container} />;
}

You can run my example on codesandbox: here I hope your response. Thank you so much!

[namlq93]

@bodymovin Thank you so much. It’s very helpful with me. Actually, my output is a little different so I’ve edited it a bit. You can see here. Even though I still don’t fully understand, but it did work anyway. Thank you again ❤️

[bodymovin]

I’m not that familiar with react hooks, but I think you should have two hooks, one similar to this: const [animation, setAnimation] = useState(null) and the other: useEffect(()=>{setAnimation(loadAnimation())},[]) and make sure that your loadAnimation method returns the animation instance. Here is a version that I think gets closer to what you need, but I’m not a react hooks expert and you probably need to adjust it to your needs. https://codesandbox.io/s/lottie-web-animation-gotostop-3-g5cq4