Showcases of Lottie animations in practice.
Designed by useAnimations.

How to start step by step

Web, iOS, Android, React Native, Lottie windows

Animate 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.

Animate on click

Animate 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.

Reverse animation on second click

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

Animate on hover

See the Pen Lottie - Animate on hover by useAnimations (@useAnimations) on CodePen.