Accessing methods when using react-bodymovin to loop animation segments

Question

I am using the react-bodymovin package (https://www.npmjs.com/package/react-bodymovin) to embed a Bodymovin animation, but I wanted to loop a section of the animation after it has played through once.

I can see is simple using the HTML version of Bodymovin, as you simply use the relevant methods to do this, for example, (assuming the div has ID bodymovin:

const params = {
    container: document.getElementById('bodymovin'),
    renderer: 'svg',
    loop: false,
    autoplay: false,
    animationData: animationData,
}

const anim = bodymovin.loadAnimation(params)

anim.playSegments([[0, 65]], true)

However, I am not sure how to access these same methods when using the React component. Here is my component:

import React from 'react'
import ReactBodymovin from 'react-bodymovin'
import animation from './animation.json'

const App = () => {
  const bodymovinOptions = {
    loop: true,
    autoplay: true,
    prerender: true,
    animationData: animation
  }

  return (
    <div>
      <ReactBodymovin options={bodymovinOptions} />
    </div>
  )
}

I have a feeling that due to the nature of the way this React wrapper works with Bodymovin, it may not be possible to access the methods within the file, but if anyone knows a way to do this, i would love to hear it. Thanks.

Answer 1

Why don't you try react-lottie package instead? It has way more npm-downloads than react-bodymovin and you can achieve what you want and play segments like so:

import React from 'react'
import animation from './animation.json'

import Lottie from 'react-lottie';

const App = () => {
  const options= {
    loop: true,
    autoplay: true,
    prerender: true,
    animationData: animation
  }

  return (
    <div>
      <Lottie options={options} segments={[0, 65]} />
    </div>
  )
}

However, with both packges you won't have full control over the lottie object and thus can't call methods like loadAnimation or loadSegments manually. However you could use the lottie-web package like you would do in normal javascript, just as you have shown. Here is an example how you should do it in react with hooks:

import React, { useEffect, useRef } from "react";
import lottie from "lottie-web";
import animation from "./animation.json";

const App = () => {
 const animContainer = useRef<HTMLDivElement>(null);

 useEffect(() => {
    if (ref.current) {
      const anim = lottie.loadAnimation({
        container: animContainer.current,
        renderer: "svg",
        loop: true,
        autoplay: true,
        animationData: animation
      });

     anim.playSegments([[0, 65]], true);
    }
  });

  return <div ref={animContainer}></div>;
}