Skip to main content

Lightweight, scalable animations

Lottie provides a simple flow to bring to your website without the need for coding. In version 15, we’ve added deep integration with Lottie to allow you to easily add and control the playback of Lottie animations directly from a page builder element.

Using an external source

The simplest method of adding Lottie animations to your site is to grab an existing animation and paste in the file URL into the Salient Lottie element.

1. Locate a Lottie file

There are many collections of Lottie files you can find online, but for this tutorial, we’ll be using lottiefiles.

Lottie files offers thousands of free animations you can browse. Once you’ve located an animation, copy the URL from the “Lottie Animation URL” field as shown on the right.

2. Add the file through Salient

In the page builder, add a Lottie element in your desired location and paste the URL into the field.

If the URL is to a valid Lottie file, you’ll immediately see a preview of the animation within the page builder element.

Note: If you opt to use a site other than lottiefiles, ensure that you trust the source before adding any Lottie file to your site.

3. Configure Animation Properties

Trigger Type

Determines what action will cause the Lottie animation to play. The available options are:

  1. Autoplay: automatically starts playing the Lottie animation as soon as the file loads
  2. Play when visible: Similar to Autoplay, but starts the animation only when the user has scrolled down to where it’s in view
  3. Scroll Position Seek: Scrubs through the animation from start to finish depending on the user’s scroll position.
  4. Hover: Triggers the animation to play only when the user has hovered over it.

Autoplay

Scroll position seek

Hover

Loop Animation

Determines whether the animation should start from the beginning and play infinite after each last frame. This is only available as an option when using the “Autoplay” and “Play when visible” trigger types.

Animation Start/End Frames

Allows you to limit the section of the animation that will play.

Animation Speed

Determines how fast your Lottie animation will play.

Dimensions

Allows you to define a custom width and height uniquely on each device viewport that you would like the Lottie animation display at. If this is left blank, the animation will attempt to fill the column width.

Preserve Aspect Ratio

When this is enabled, your Lottie animation will not stretch its original aspect ratio. However, sometimes it might be useful to allow your animation to stretch to fill an area and setting this field to “none” will make that easier.

Creating your own Lottie Animation

While we’re not going to cover a full example of the process, it is possible to create your own Lottie animations using Adobe After Effects. All you need to be able to export Lottie animations from After Effects is a free plugin. Below are two plugins that add the functionality.