Lottie Animation Element
The Lottie Animation Element plays a Lottie animation on your page. Lottie files are small JSON files that describe vector animations, so they stay sharp at any size and usually weigh far less than a video or an animated GIF.
You decide when the animation plays: right away, when it scrolls into view, on click or hover, in step with the page scroll or following the mouse pointer. You can also loop it, reverse it, change its speed, play only part of it and link it to another page.
In this article: How To Use · Element Options · Tips · Related Elements · Example
How To Use The Lottie Animation Element
Add the Lottie Animation Element to any column and upload your file in the JSON Upload field. The element allows JSON files in the Media Library, so you can upload them like images. Add a Link URL if the animation should lead somewhere; Link Target appears once a link is set.
Choose a Trigger. None plays at once, Viewport plays when the element comes into view (set the moment with Trigger Offset), Click plays on click, Toggle Click switches between play and pause, and Hover plays while the pointer is over it. Scroll ties the animation to scrolling, relative to the element’s own visibility, the Entire Page or another element named in Element Selector. Cursor Move follows the pointer in the chosen Cursor Direction.
Then set Loop, Reverse Animation and Playback Speed, and use Start Point and End Point to play only a section of the animation. On the Design tab, Max Width limits the size and Align places the animation left, center or right. The Extras tab adds an entrance animation and color filters for the normal and hover state.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
Options marked as responsive can be set separately for large, medium and small screens; the screen icon next to the option switches between them.
General
| Heading | Description |
|---|---|
| JSON Upload | Upload a lottie JSON file. Visit LottieFiles to find animations. |
| Link URL | Add the URL the animation will link to, for example http://example.com. |
| Link Target | Controls how the link will open. |
| Trigger | Select the trigger for the animation to play. |
| Trigger Offset | Controls when the animation should play. |
| Animation Relative To | Select to what the start of the scroll animation should be relative to. |
| Element Selector | Insert the element CSS selector. |
| Cursor Direction | Control the direction of cursor movement to trigger the animation. |
| Loop | Controls whether the animation should loop. |
| Reverse Animation | Select “yes” to play the animation in reverse. |
| Playback Speed | The speed at which the animation will be played. 1 is the normal speed, 2 is twice as fast, 0.5 is half speed. |
| Start Point | Set the animation start point. In percentage. |
| End Point | Set the animation end point. In percentage. |
| Element Visibility | Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. |
| CSS Class | Add a class to the wrapping HTML element. |
| CSS ID | Add an ID to the wrapping HTML element. |
Design
| Heading | Description |
|---|---|
| Max Width | Set the maximum width the animation should take up. Enter value including any valid CSS unit, for example 200px. Leave empty to use full width. |
| Align | Choose how to align the animation. |
| Margin | Enter values including any valid CSS unit, for example 4%. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
| Animation Type | Select the type of animation to use on the element. |
| Direction of Animation | Select the incoming direction for the animation. |
| Animation Color | Select the color of the animation. |
| Speed of Animation | Type in speed of animation in seconds (0.1 – 5). |
| Animation Delay | Select the delay time after the animation starts(0 – 5). |
| Offset of Animation | Controls when the animation should start. |
| Filter Type | Use filters to see specific type of content. |
| Hue | Filter hue. |
| Saturation | Filter saturation. |
| Brightness | Filter brightness. |
| Contrast | Filter contrast. |
| Invert | Filter invert. |
| Sepia | Filter sepia. |
| Opacity | Filter opacity. |
| Blur | Filter blur. |
Tips
- Playback Speed multiplies the animation’s own speed: 1 plays it as designed, 2 twice as fast, 0.5 at half speed.
- Align only has an effect when Max Width is set. Without a maximum width the animation fills the column.
- End Point must be higher than Start Point, otherwise the animation plays to its last frame.
- Reverse Animation is not available with the Scroll trigger, because scrolling up already plays the animation backwards.
- An animation has no text alternative. Do not use it as the only carrier of important information, and avoid endless loops next to text people need to read.
- The player scripts come with the Builder and load from your own site, only on pages that contain the element.