Using with multiple animations

. Creating a multi-animation .lottie file

To create a multi-animation .lottie file, you can use our creation library dotlottie-js.

After following the installation steps for dotlottie-js, you can start creating your own .lotties:

async function createDotLottie() {
  const dotLottie = new DotLottie();

  // build dotLottie
  await dotLottie
        .addAnimation({
          id: 'dog_animation',
          url: 'https://my_dog_animation.json',
          loop: true,
          autoplay: true
        })
        .addAnimation({
          id: 'cat_animation',
          url: 'https://my_cat_animation.json',
          loop: true,
          autoplay: true,
          direction: -1,
          playMode: 'bounce'
        })
        .build()
  
  // download dotLottie
  await dotlottie.download('my_animation.lottie');
}

The player by default plays the 1st animation in the manifest. However if you want a specific animation to be played initially, you can pass activeAnimationId.

The following methods can be used to navigate around multiple animations in a .lottie

• next: ( getOptions?: (currPlaybackOptions?: PlaybackOptions, manifestPlaybackOptions?: PlaybackOptions) => PlaybackOptions, ) => void;

• play: ( indexOrId?: string | number, getOptions?: (currPlaybackOptions?: PlaybackOptions, manifestPlaybackOptions?: PlaybackOptions) => PlaybackOptions, ) => void;

• previous: ( getOptions?: (currPlaybackOptions?: PlaybackOptions, manifestPlaybackOptions?: PlaybackOptions) => PlaybackOptions, ) => void;

• reset: () => void;

pageMethods

import { DotLottiePlayer, Controls } from "@dotlottie/react-player";
import type { DotLottieRefProps } from "@dotlottie/react-player";
import { useRef } from "react";

const App = () => {
  const lottieRef = useRef<DotLottieRefProps>();
  const activeAnimationId = "bounce";

  return (
    <div>
      <button
        onClick={() => {
          lottieRef.current?.previous();
        }}
      >
        Prev
      </button>
      <button
        onClick={() => {
          lottieRef.current?.next();
        }}
      >
        Next
      </button>
      <button
        onClick={() => {
          lottieRef.current?.next();
        }}
      >
        Reset
      </button>
      <button
        onClick={() => {
          lottieRef.current?.next({ speed: 10 });
        }}
      >
        Next with Speed 10
      </button>
      <button
        onClick={() => {
          lottieRef.current?.play("wifi", {
            direction: -1,
          });
        }}
      >
        Play wifi
      </button>
      <DotLottiePlayer
        activeAnimationId={activeAnimationId}
        lottieRef={lottieRef}
        style={{ height: "500px", display: "inline-block" }}
        src="https://lottie.host/c7029f2f-d015-4d88-93f6-7693bf88692b/d7j8UjWsGt.lottie"
        autoplay
        loop
      >
        <Controls />
      </DotLottiePlayer>
    </div>
  );
};
export default App;