0

I've made an animation which consists of a cabin and a few clouds floating in the sky. I wanna loop the entire animation but just can't find the proper way to implement this. This is my current approach.

const { rive, RiveComponent } = useRive({
     src: Cabin,
     autoplay: true,
     onStop: () => {
        if (window.location.href === "http://localhost:8000/profile") { 
        // check the url to prevent error when switching pages, which also makes the animation stop
            rive.play()
        }
     }
})

It works for now, but I still wonder whether there is any cleaner way to loop animation or not.

Weber Chang
  • 45
  • 1
  • 7

1 Answers1

0

You might be able to address this at design-time, rather than in code. https://help.rive.app/editor/animate-mode/timeline#animation-type

Maybe you can try playing around with the loop options here!

zplata
  • 1
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 05 '22 at 22:54