Lottie Animations

This element allows you to easily bring Lottie animations into Bricks, controlling the animation by hovering, scrolling position (relative to any chosen container), cursor position (relative to the animation), clicking or simply leaving to autoplay & loop.

Adding Lottie Files

You can add the Lottie JSON files to your media library and then enter the URL for the Lottie JSON files inside the Lottie element settings. (or use dynamic data to pull in the URL)

If you’re looking for pre-built animations..

For free lottie icon pack -> https://useanimations.com/
For a large library of free & premium -> https://lottiefiles.com/

Setting up the Animation

Start frame – Choose the very first frame number for the animation to start at.
End frame – Choose the very last frame number where the animation will always end
Speed – Normal speed is 1. Set between 0-1 for a slow animation, higher than 1 will increase the speed.

Interactivity

The Lottie element comes with a number of interactions, to help you control how users interact with the animations.

When visible in viewport – The animation will play just as the element comes into viewport.

Scroll (relative to lottie) – The animation is controlled by the users’ scrolling, this is relative to the visibility of the animation itself. Meaning starting when the animation first comes into view, and ending when it goes back out of view.

Scroll (relative to another element) – The animation is controlled by the users’ scrolling, this is relative to the visibility of the chosen element. Starting when the element first comes into view, and ending when it goes back out of view.

Click (on lottie) – The animation will play when the user clicks on it. Supports ‘reverse on second click’ to rewind playback if the user clicks again.

Click (on another element) – The animation will play when the user clicks on the chosen element. Supports ‘reverse on second click’ to rewind playback if the user clicks again.

Hover (over lottie) – The animation will play when the cursor hovers over it. Supports ‘reverse on mouseout’ to rewind playback when the cursor moves away from the animation.

Hover (over another element) – The animation will play when the cursor hovers over the chosen element. Supports ‘reverse on mouseout’ to rewind playback when the cursor moves away from the element.

Cursor position – The animation will be scrubbed depending on the user’s cursor position relative to the animation element.

Offsets

For animations being controlled by scrolling, it’s all based on the visibility of elements. This means the animation starts when the element first reaches the bottom of the viewport and ends when it goes out of view at the top.

Offsets are useful for changing this behaviour. For eg..

Setting 20% bottom offset would mean the animation won’t start playing until it touches 20% from the bottom of the viewport.

Setting 40% top offset would mean the animation will finish playing when it goes past the 40% from the top of the viewport.

The best way to think about it is they add invisible margins to the top or bottom of the viewport, shrinking the available space where the animation can take place. (the smaller the available space, the faster the animation will go as the user scrolls as there are more frames to get through in a smaller space).