isotropic-2022
Share
Blog
Search
Menu

How To Add Lottie Animations To An Oxygen Builder Website

By James LePage
 on January 15, 2021
Last modified on January 6th, 2022

How To Add Lottie Animations To An Oxygen Builder Website

By James LePage
 on January 15, 2021
Last modified on January 6th, 2022

Lottie are a type of animation that is created to replace GIFs and videos. It's very lightweight, and as a modern and professional touch to any website. In this blog post, we're going to be discussing how to add lotties to your Oxygen Builder website.

Lottie on Android: Part 1 — The basics | by Connie Reinholdsson | Compare  the Market | Medium

Unlike other page builders, Oxygen Builder does not have a native integration too easily add lotties to your website. Instead, we're going to use a code block, two JavaScript libraries, and some simple copying and pasting to integrate lotties into our website. This article is going to cover how to add a basic looping animation, make the animation interactive in regards to the scroll position on your page, only play it when hovering over it with your mouse, and even toggle the lottie animation on click.

As you'll see, it's relatively easy to add a lottie to your website built with oxygen, and it adds a unique touch that makes the end product alot more professional and interesting to your users. Best of all, when compared to a video and gift, the impact on performance is utterly negligible.

Video Tutorial

Keep reading for the written tutorial. Also, check out the Cheatsheet (UPDATE: unfortunatly I lost the cheatsheet. So no cheatsheet, no matter how much I plug it in this article and video -- SORRY!). Hence why the video is unlisted 😥.

Like this content? Subscribe to our channel!

Note: we are using the Web Player method for most of this article, not the Bodymovin JS libraries, which is the official way to add a lottie to a web property. That’s because that method is much more complex, and if you’re simply looking for a way to add a lottie to Oxygen Builder, there are easier ways. The Web Player method also allows for simple interactive effects.

However, if you're looking for more functionality, Scroll down to the last section of this article which will introduce you to the Bodymovin integration method.

With that said, Here's how to add a lottie to your oxygen builder website by using a simple JavaScript library and easy to implement HTML.

Step 1: Add your Javascript

The first step is adding the applicable libraries to your WordPress website. This is done in the same way that any third party JavaScript library is included in WordPress. This example uses a CDN, so simply insert this CDN script link into the header of your WordPress website. We recommend using Advanced Scripts to do this, but you can also use Code Snippets.

The first library is mandatory, and is the webplayer library, which registers a new HTML element used to add lotties to your site.

<!-- The player element -->

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

The second library is only required if you are going to be implementing interactive effects, like animating the lottie as the user scrolls down the page.

<!-- The interactivity engine -->

<script src="https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js"></script>

You can copy paste these scripts from our Oxygen Builder Lottie Cheatsheet.

If you're looking for performance, self hosting the script by downloading it, uploading it to your WordPress website, and then either using a script tag or enquing it into your site is the best way to do this.

Once you've installed these scripts, it's time to add a lottie to your website.

Step 2: Adding A Lottie To Oxygen Builder

If you're simply looking to add a basic Lottie, or Lottie with hover effects, it's actually relatively simple. First, take the JSON file, and upload it to your WordPress website. You'll need to enable JSON uploads: here’s how.

Then, in a code block HTML section, paste in the following:

<lottie-player src="path.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop autoplay></lottie-player>

The SRC can be the URL of any Lottie JSON. The website LottieFiles.com has a CDN feature which allows you to copy JSON urls directly instead of downloading them. This is easier, but results in a third party resource being used on your site.

The very same website has a generator that will make that code for you. It's important to understand how to actually integrate the animation into your website, but using the generator can save you time. To do that, simply click the HTML button under a single Lottie listing on the site, and access the generator.

Set your various effects, and only copy the second line of the output into the HTML section of a code block on your Oxygen Builder website (You have already integrated the third party JavaScript via a CDN and it is added to the header of your WordPress website).

Save the page, and navigate to the front end of your oxygen builder website. The lobby will now be displayed on the page, and be automatically playing an looping through its frames. If you're looking to add a very simple animation, that's the way to do it. A single line of code, and a single third party JavaScript library. Now, you can take it a step further by making this animation interactive. You can only set it to play when a visitor hovers over it with their mouse cursor, or, toggle through the frames as the visitor scrolls through your website. This is what Lotties are known for, and we're going to set that effect now.

Step 2.5: Making The Lottie Interactive

Lotties and interactivity go hand in hand. By using the web player Javascript Library, We can make use of the second library that we installed which is designed to easily help you implement interactive effects.

On Hover

To make your lottie only play on hover, you don't even need any additional third party JavaScript. Simply set the attributes LOOP and HOVER (omitting autoplay) in the original HTML, which is pasted into a code block:

<lottie-player src="path.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop hover></lottie-player>

On Scroll (Body)

This is one of my favorite effects, which plays the lottie, frame by frame, as the user scrolls through the entire height of the web page. This is really unique because it synchronizes the animation with how fast the user is scrolling, and the direction that the user is scrolling in. To see a real example of this, I recommend you download our Cheatsheat.

To do this, add the Lottie as you would normally. Specify an ID for it.

<lottie-player id=”lottie” src="path.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop hover></lottie-player>

Then, in the JavaScript section of that same code block, paste in the following:

LottieInteractivity.create({
     mode:"scroll",
     player:'#lottie’,
     actions: [
         {
             visibility:[0,1],
             type: "seek",
             frames: [0, total # of frames],
         },
     ]  
 }); Code language: PHP (php)

Ensure that the ID specified here matches the ID of the HTML lottie player element. This code will make your lottie animate as you scroll through the page. Be sure to set the total number of frames to match the total number of frames in your animation. You can figure this out by going to the lottiefiles website (if that’s where you got it from), and checking on the individual listing.

On Scroll (Container)

You can also make your animation interactive to the scroll of a specific container.

Add the html, and set an ID. Then, in the JS section of the code block, add the following:

LottieInteractivity.create({
     mode:"scroll",
     player: "#scroll-w-container",
     container: "new_columns-71-8114",
     actions: [
         {
             visibility:[0,1],
             type: "seek",
             frames: [0, 450]
         }
     ]
 }); Code language: CSS (css)

The Player is the ID of the lottie, while the container is the ID of the container that the scroll effects are impacted by.

A very unique effect that I like using on many websites is a sticky Lottie that is animated on scroll, synchronized to the viewport position in relation to a single container. Here's how to do that in video format:

The lottiefiles website also has additional guidance on using this interactivity library with and JSON based lottie, here.

Also, if you want to automatically generate the code, simply navigate to an individual Lottie, click on the big interactive button, and the code will be filled out for you. Then, just copy and paste the HTML into in HTML section of a code block in oxygen, and the JavaScript into the JavaScript section of that same code block.

Click the interactivity button

Here, you can see that an ID has already been set, is the same in the corresponding JavaScript, and the frames match the number of frames in the lottie file:

Everything's prepoulated

On Click

If you're looking to animate Lottie animation when clicking on it, this requires an alternate method of integration. instead of using the two JavaScript libraries mentioned above, we are only going to use one, and a bit of custom JavaScript to get this job done. This is a completely different method than outlined in the previous sections of this article, and can become a bit complex. However, if you have a handle on JavaScript, this is probably a better method.

First, add the following JS library to your WordPress websites header (omitting the two mentioned above):

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.3/lottie_svg.min.js"></script>

Add a new code block, and within it add a div in the HTML section. Style the div, giving it a width and a height in the CSS section. Finally, in the JavaScript section, we are going to set the Lottie animation, and make it animate when clicked on.

Add these scripts to your Header with Advanced Scripts
Sizing with CSS
//the JS

/* Play an animation on each click */
     let checkmarksthespot = document.querySelector('.onclicklottie1');
 <code>let animationSkipForward = bodymovin.loadAnimation({         container: checkmarksthespot,         renderer: 'svg',         loop: false,         autoplay: false,         path: "https://assets7.lottiefiles.com/private_files/lf30_jgkflosi.json" });   checkmarksthespot.addEventListener('click', function() {   animationSkipForward.playSegments([0,28], true); });</code>Code language: PHP (php)

Change the CSS class, container in the JS, and the path. The path is the URL to the JSON file that makes up the lottie animation. Also, be sure to set the # of frames, in this example, it's 28.

Here, you can see a different way of integrating lotties into your website. This uses JavaScript and event listeners to understand when a user takes a desired action, which in this case is clicking on the lottie itself, and then toggles the animation. It's a bit more complex, which is why it wasn't mentioned for the duration of this article, but it's also much more powerful. If you are a serious developer that understands JavaScript, this is the best way to go about integrating this type of animation on your Oxygen Builder WordPress website.

Conclusion

If you are looking to implement easy to use animations on your oxygen builder website, using Lottie file is one of the best ways to do this. It's lightweight, much better performing than video or a gift, and fairly easy . All you need to do is add a new code block, and paste in some HTML and JavaScript as long as you have the proper libraries installed. Again, if you have any questions, we recommend you watch our companion YouTube video and download the cheat sheet that was generated specifically so you can take a look at the code that makes up our Lottie demonstrations.

Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Subscribe
Notify of
guest
3 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Ivan Brignone
Ivan Brignone
3 years ago

Thx! I'm using the first method and works perfectly.
In elementor I was using the "reverse" animation on leaving the hover state.
How can I achieve that in oxygen? When I exit the hover state, the animation drop to initial state immediatly.

thx again!

Cole Byrne
Cole Byrne
2 years ago

Thanks for sharing this! I’m delighted with this information, where such important moments are captured. All the best!

Tom
Tom
10 days ago

And there is no way how to put it to my site directly? I don't want to have it somewhere on cdn.

Article By
James LePage
Contributors/Editors
notloggedin
James LePage is the founder of Isotropic, a WordPress education company and digital agency. He is also the founder of CodeWP.ai, a venture backed startup bringing AI to WordPress creators.
We're looking for new authors. Explore Isotropic Jobs.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram