Lottie animations are an effective way to add eye catching, contextual animation to your designs.  In addition to a lively community at lottiefiles.com, the Lottie file format is commonly supported by animation tools, so it's easy to turn animations from almost any source into something that works with Sparkle in your website.

The animation files have a “.lottie” file extension (also known as “dotLottie”), or a ".json" extension for older animations, so that's what you will be looking for when downloading animations. You can then either drop the file in the Sparkle canvas or add the animation element, then add the file from the inspector.

While a continuously bouncing animation can be a little too much, it might work in some specific pages. For example a tasteful animation makes sense on a contact form thank you page, or in a short lived popup.

Animations can be configured to run once or in a loop, and to loop only forward or back and forth. You can configure the animation playback speed.

The Lottie animation can also be configured to play while scrolling, and in that case the animation speed control will become a speed multiplier, to control how scrolling affects animation advancement.

Lottie animations start automatically when in view, and stop when scrolled out of view. This also works with popups.

Here's a Lottie animation: