Tutorial: Implementing Lottie Animations In WordPress With Oxygen

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.