dotlottie-react - set activeAnimationId for Multi Animation dotLottie on Load

[khuynh92]

Overview

Hi,

I have an animation that has multiple animations, and on first page load I want to play the 2nd animation. I'm having trouble setting the activeAnimationId on load for a dotLottie file with multiple animations.

I've tried using DotLottie.loadAnimation(animationID) in a useEffect hook with the DotLottie player as a dependency, but this does not update the active animation correctly.

Do you have an example of setting the activeAnimationId for dotlottie-react on first render?
...

Consuming repo

What repo were you working in when this issue occurred?

...

Labels

[theashraf]

@khuynh92 Hope this example makes sense.

for more details about the manifest structure, you may checkout dotlottie.io

import { DotLottie, DotLottieReact } from "@lottiefiles/dotlottie-react";
import { useEffect, useState } from "react";

function Player() {
  const [dotLottie, setDotLottie] = useState<DotLottie | null>(null);

  useEffect(() => {
    const onLoad = () => {
      // the dotLottie manifest.json is now loaded
      const manifest = dotLottie?.manifest;

      // get the id of the second animation or any other animation you want to play on load
      const secondAnimationId = manifest?.animations[1].id;

      // if the second animation is already loaded, don't load it again
      if (dotLottie?.activeAnimationId === secondAnimationId) return;

      if (secondAnimationId) {
        // load the second animation and play it
        dotLottie?.loadAnimation(secondAnimationId);
        dotLottie?.play();
      }
    };

    dotLottie?.addEventListener("load", onLoad);

    return () => {
      dotLottie?.removeEventListener("load", onLoad);
    };
  }, [dotLottie]);

  return (
    <DotLottieReact
      dotLottieRefCallback={(dotLottieInstance) =>
        setDotLottie(dotLottieInstance)
      }
      src="https://lottie.host/294b684d-d6b4-4116-ab35-85ef566d4379/VkGHcqcMUI.lottie"
      loop
    />
  );
}

export default Player;

[theashraf]

Thanks @khuynh92 for bringing this up. There are some issues/improvements I've identified from your question. We will be working on them, but for now, you may refer to the example I've attached. Let me know if there are any other issues.

[khuynh92]

Thanks @theashraf, this solution worked for me! Looking forward to the addition of the activeAnimationID prop in future releases 🙂

[theashraf]

@khuynh92 added animationId prop in dotlottie-react v0.7.0

[khuynh92]

@theashraf Thanks for adding the animationId and themeData prop! I tried it these props out and they do work when interacting with the component after first render.

But when setting an initial value for the animationId and themeData, the changes do not show up on first render. Would it be possible to have these props take effect on first render?

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs.

[phalmeida]

@theashraf Thanks for adding the animationId and themeData prop! I tried it these props out and they do work when interacting with the component after first render.

But when setting an initial value for the animationId and themeData, the changes do not show up on first render. Would it be possible to have these props take effect on first render?
@theashraf
I’m having the same problem! I have multiple animations and when using animationId. The animation set in animationId doesn’t load correctly on the first render.

[theashraf]

@phalmeida thanks for reminding me, I havent had a look at this issue yet, will dedicate some time for it this weekend.

But meanwhile, for the first render you may try to load the animation using the dotLottie instance api instead.

As shown here
#250 (comment)