lottie-react useLottieInteractivity play once?-CodePudding

I'm trying to have an animation with lottie that will only trigger once when reaching a certain visibility level. My problem is, the animation always loop with useLottieInteractivity and I'm not sure how to make it play only one time.

So this is what my code look like:

import React, { useEffect } from "react"
import { useLottie, useLottieInteractivity } from "lottie-react"
import CMS from "../components/remdash/animations/cms.json"

const LottieBlock: React.FC<any> = props => {

  const options = {
    animationData: CMS,
  }

  const LottieAnimation = () => {
    const lottieObj = useLottie(options)
    const Animation = useLottieInteractivity({
      lottieObj,
      mode: "scroll",
      actions: [
        {
          visibility: [0, 0.4],
          type: "seek",
          frames: [0],
        },
        {
          visibility: [0.4, 0.5],
          type: "play",
          frames: [0, 60],
        },
        {
          visibility: [0.6, 1],
          type: "stop",
          frames: [60],
        },
      ]
    })

    return Animation
  }

  const showVisualization = (
    <div className="relative w-full h-full">
        <React.Fragment>
          <LottieAnimation />
        </React.Fragment>
    </div>
  )

  return showVisualization
}

export default LottieBlock

CodePudding user response：

You want to disable the loop and autoplay attributes then use the play() function.

CodePudding user response：

Try replacing:

actions: [
        {
          visibility: [0, 0.4],
          type: "seek",
          frames: [0],
        },
        {
          visibility: [0.4, 0.5],
          type: "play",
          frames: [0, 60],
        },
        {
          visibility: [0.6, 1],
          type: "stop",
          frames: [60],
        },
      ]

with

actions: [
        {
          visibility: [0, 0.4],
          type: "seek",
          frames: [0],
        },
        {
          visibility: [0.4, 0.5],
          type: "playOnce",
          frames: [0, 60],
        },
        {
          visibility: [0.6, 1],
          type: "stop",
          frames: [60],
        },
      ]