Lottie Animation

This component allows to easily bring lottie animations into Oxygen, 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.

Option Controls

JSON URL

Add the JSON URL for your lottie animation. The JSON files can be hosted at your site, or externally, for eg at Lottiefiles.com. Advanced custom fields can be used to dynamically populate the JSON url by adding your ACF field name to the ACF field textfield.

Animation Control

The lottie component comes with six types of animation control.

Autoplay

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 continiously play.

Click

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.

When user clicks..

This element or another element. Here you can choose a seperate 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.

Hover

The animation will be triggered as the cursor hovers over the animation and will reset when the cursor leaves the animation.

Cursor Position

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 users 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.

Mouse Over

The mouse over is similer to the hover animation control, but with more control.

  • Both the start frame and end frame can be adjusted.
  • When the user stops hovering over the element, the animation will rewind back to the starting frame.
  • Any container can be used as the hover effect, not just the element itself.

Scroll

The animations can either be played on page load on a continious 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 end point 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.

Animation Speed

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.

Play Mode

Bounce will play back the animation in reverse when it reaches the last frame. Normal mode will start the animation again from the beginning.

Start / End Frames

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).

Show Controls

Select to allow visitors to control the playback with the controls visible underneath the animation.

Loop

For the animation controls that aren’t dependant on user interactions, the playback can be set to loop.

Performance

Generally with lottie animations, for best performance the smaller the animations the better. By default, no animations will play unless they are visible inside the viewport. The only issues that will arise it potential lag if using multiple animations visible at one time that are fairly large.

chevron-down