Now is your last chance to buy a lifetime license before we switch to annual pricing. Existing licenses will be unaffected.
read more
Posted on November 13, 2022

Tutorial: Implementing Lottie Animations In WordPress With Oxygen

hello world!

In this tutorial, we explain how to find and use Lottie Animations on your WordPress website in Oxygen.

We'll use Lottie Files to find an animation to add to our site. Please note that you'll need to create an account for Lottie Files if you haven't already. Once we find our animation, we'll copy it and go to the Lottie Web Player, where we modify the animation to meet our needs. We'll then copy this animation's code.

In the next step, we'll open our page or template in Oxygen, add a Code Block element, and then paste our animation into the PHP & HTML tab of the Code Block element.

As a bonus, we'll add some JavaScript to the Code Block element to load the Lottie Animation in Oxygen using the following script: https://gist.github.com/Kpudlo/1559c6486f613bcf5d895dbce6c236dc. This code allows us to see the animation when working on our site in Oxygen instead of having to view it on the front end.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

Get Oxygen Today

Lifetime, unlimited site license

Copyright © 2024 Soflyy
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram