Lottie-web: Play once then loop from frame to frame

Created on 10 Aug 2017  路  3Comments  路  Source: airbnb/lottie-web

Is it possible to play an animation once and then call the same animation to loop from e.g. frame 25 to frame 300? I've been looking for documentation in the issues and haven't been able to locate anything. any help would be appreciated.

Most helpful comment

Try using:
anim.playSegments()

If your animation is 300 frames long then it should go something like this:
anim.playSegments([[0,300],[25,300]], true);

This way the animation will play once and then loop frames 25 to 300. You can have as many segments as you want inside the first brackets ([ [segment1], [segment2], [segment3] ], true); the last one will loop if you set it to loop in the animation parameters.

"true" at the end of the function means it will override the existing animation if its already playing. If you set it to "false" then if you try to override animation, it will wait for the old segments to finish and only then play new segments.

All 3 comments

Try using:
anim.playSegments()

If your animation is 300 frames long then it should go something like this:
anim.playSegments([[0,300],[25,300]], true);

This way the animation will play once and then loop frames 25 to 300. You can have as many segments as you want inside the first brackets ([ [segment1], [segment2], [segment3] ], true); the last one will loop if you set it to loop in the animation parameters.

"true" at the end of the function means it will override the existing animation if its already playing. If you set it to "false" then if you try to override animation, it will wait for the old segments to finish and only then play new segments.

Thank you this works perfect! I'd also connect this: https://github.com/bodymovin/bodymovin/issues/398

for us novices that aren't sure about placement of code. Thanks again for all your help.

Hello @azun1te,
I was searching the web on how to achieve something like this and came across your answer. However, I am looking to loop the first part of the animation a couple of times, then continue to the rest of the animation and stop when it ends. Any suggestions on how I can do this?

For example, loop frames 0 to 100 three times and then continue from frame 100 to 300 and stop.

Thanks for your help!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

dulllud picture dulllud  路  3Comments

RenanSgorlom picture RenanSgorlom  路  3Comments

phileastv picture phileastv  路  3Comments

yannieyeung picture yannieyeung  路  3Comments

casillasluisn12 picture casillasluisn12  路  4Comments