Showcases of Lottie animations in practice.
Designed by useAnimations.

Play in loop

For infinite loop let in the .JS set "loop: true". For one cyclus of animation set "loop: false"./p>

See the Pen Lottie animation in loop by useAnimations (@useAnimations) on CodePen.

Play on click

Play an animation on each click.

playSegments(segments, forceFlag)

Segments: array. Can contain 2 numeric values that will be used as first and last frame of the animation. Or can contain a sequence of arrays each with 2 numeric values.

ForceFlag: boolean. If set to false, it will wait until the current segment is complete. If true, it will update values immediately.

See the Pen Lottie play on click by useAnimations (@useAnimations) on CodePen.

Play back on second click

See the Pen Lottie play back on second click by useAnimations (@useAnimations) on CodePen.