This component allows to easily bring lottie animations into Zion Builder, 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.
Here are some short videos explaining the settings and uses. Full details of each settings can be found below.
Add the JSON URL for your Lottie animation. The JSON files can be hosted at your site, or externally, for eg at Lottiefiles.com.
The Lottie component comes with six types of animation control.
The animation will autoplay when the page first loads if in the viewport. Otherwise, the animation will start playing just as it comes into view, giving the appearance to be always playing to the visitor.
If loop is selected, the animation will continuously play.
The animation will only be triggered to play if the user clicks (or taps). The second click (and all even number of clicks) can be set to reverse the animation instead of simply playing it again. This is useful if using Lottie for triggers where one click would be to open and the next to close it.
This element or another element. Here you can choose a separate element as the click trigger. This is useful if you are building a button with a Lottie icon and need the icon to animate when the entire button is clicked, not just the icon.
The start of the animation is when the cursor is in the very top/left corner of the component and as the user moves either right or down the animation will play. The last frame is when the cursor is at the very bottom/right of the element.
The ‘cursor position’ control offers a smoother experience for the user than the basic ‘hover’ control as when the user’s cursor leaves the element, there isn’t a jump to the beginning of the animation. Instead, the frame will stick on the last frame.
Update: Now any container element can be used to calculate the cursor position, ideal for placing animations inside link wrappers where the animation needs to be based on the entire link, not just the animation inside.
The mouseover is similar to the cursor position control, but with more control.
The animations can either be played on page load on a continuous loop, only animated when the user hovers over the element or controlled via scrolling.
If controlled by scrolling, selecting the start frame and end frame will control the exact starting point and endpoint that is shown as the element travels from the bottom of the viewport to the top.
Note – if the element isn’t animating when scrolling, you may have chosen a frame that doesn’t exist.
For the animation controls that aren’t dependant on the user interactions, the animation speed can be set. 1x being the default speed. 2 meaning playback is twice as fast.
Bounce will playback the animation in reverse when it reaches the last frame. Normal mode will start the animation again from the beginning.
For the animation controls that are dependant on user interactions, such as ‘scroll’, ‘cursor position’ & ‘click’ you can choose the exact frames that the animation will start and end on.
Tip – ensure the start & end frames exist in the specific Lottie file you are playing. If downloading a Lottie file from a 3rd party source the start and end frames are usually displayed near the download button. If not, opening up the JSON file and looking at the code is an easy way to find out. Search for ‘op’ in the code. eg “op”:930 (where 930 is the number of frames).
For the animation controls that aren’t dependant on user interactions, the playback can be set to loop.