Published on November 13, 2022

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.

 

The Oxygen Team
Updated on: November 13, 2022

You'll build incredible websites with Oxygen

Get started with Oxygen today and unlock incredible value.

Get Oxygen

30-day money back gurantee

Try Oxygen risk-free. If youโ€™re not satisfied, get a full refund within 30 days.

Unlimited site license

Use Oxygen on as many personal or client projects as you want โ€” no limits.

Fast, world-class support

Our experienced team is eager to assist you with technical questions.

Use on client websites

Build and deliver professional-grade websites for your clients with no extra fees.