Lottie w/ Advanced Interactivity Viewer

This tool is meant to demonstrate the power of Lottie. I created this animation with Adobe Illustrator and After Effects, and I am using a custom JavaScript function that allows you to define "segments" of the animation, along with different "exit points" for each segment.

Go ahead and try hovering your mouse over the rocket. You'll notice that no matter when you stop hovering your mouse, the animation will finish in a natural-looking way. This is because I have split the animation's playback into different segments, each with a different "exit" animation.

◀ Check out the Rocket animation

Try hovering your mouse over the image

Check out the Monitor animation ►

Playback Speed (between 0.1 and 10):

Frame out of , Segment

Blue: Animation Entry

Red: Animation Exit