Lottie Animations

Lottie animations are an effective way to add some whimsy 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 ".json" extension, 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.

Animation 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:

Updated for Sparkle 5

Auf Deutsch

En Français

In Italiano

Please report any shortcoming in this documentation and we’ll fix it as soon as possible!

Made with Sparkle

Copyright © Crinon SRL 

This website makes use of cookies.

Please see our privacy policy for details.

It’s Okay