The Lottie component allows you to add (lazy loading) Lottie animation with the ability to control playback based on a number of user interactions

Scroll for demos

You just need a Lottie JSON file to get started. There's a bunch of free ones at lottiefiles.com

The scrolling user interaction can work well with sticky elements to allow time for the animation to play

Or to scrub forwards / backwards through the animation as the user passes by.

Mouseover controls are for playing forwards on hover and then reversing back to the start.

Taking advantage of the 'reverse on second click', we can use for toggling elements like menus or offcanvas'.

The mouseover control can also be added to container selectors. So hovering anywhere over a button can play the animation inside of it.

chevron-down