Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to combine mutiple Lottie animation?

Is there a way to combine multiple Lottie animations into a single one? I tried https://github.com/LottieFiles/lottie-js but failed. Above lib offers good enough API to manipulate existing elements, but doesn't allow to combine aniamtions. Are there any other javascript libraries that may achieve this?

like image 462
Anil Soni Avatar asked Sep 17 '25 20:09

Anil Soni


1 Answers

If you want to play animations in a sequence, one after the after when they finish you could use Lottie-Interactivity. One of the modes allows you to play animations in a sequence, even loading them from a URL so you won't have to stick the animations together manually, heres a section from the LottieFiles website explaining how to set it up: https://lottiefiles.com/interactivity#chainLoadExample

Using that library your setup would look like this:

LottieInteractivity.create({
    player: '#chainLoadPlayer',
    mode: 'chain',
    actions: [
    {
        state: 'autoplay',
        transition: 'onComplete',
        path: 'URL'
    },
    {
        state: 'autoplay',
        transition: 'onComplete',
        path: 'URL'
    },
    {
        state: 'autoplay',
        transition: 'onComplete',
        path: 'URL',
        reset: true
    }
    ]
});
like image 80
sam-osb Avatar answered Sep 19 '25 08:09

sam-osb