Cannot load multiple instances of the same animation in a single container. - Githubissues

airbnb / lottie-web

Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/

MIT License

30.6k stars 2.88k forks source link

Cannot load multiple instances of the same animation in a single container. #2975

Open AlexanderTheWise opened 1 year ago

AlexanderTheWise commented 1 year ago

Tell us about your environment

OS: Windows 11
Node: 19.4.0
Framework & Build tool: vite(^4.1.4) & vue:(^3.2.47)
lottie-web: ^5.11.0

Browser and Browser Version

Google Chrome 112.0.5615.138

What did you do?

I created an SFC (FormEyes) to be rendered in a parent component (LoginPage). I previously extracted the component's setup and state management to a composable, creating an array of instances of AnimationItems for an eye animation in a single container, after the component has been mounted.

  onMounted(() => {
    const animationItems: AnimationItem[] = Array(2).fill(
      lottie.loadAnimation({
        container: document.querySelector(".eyes")!,
        renderer: "svg",
        loop: false,
        animationData: eyes,
        initialSegment: [1, 20],
      })
    );
  });

What did you expect to happen?

I was expecting both animations to load with the specified segment simultaneously.

What actually happened?

Only one of them did.

BokunoMasayume commented 1 year ago

try this: container: document.querySelector(".eyes").apendChild(document.createElement("div"))