This members-only tutorial provides the steps to load Lottie svg animations as background for full height section in Oxygen.

Lottie is a library for Android, iOS, Web, and Windows that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile and on the web!

This is similar to the earlier particles.js tutorial.

You will need to have a URL of your animation's json file ready. If you don't have one, follow the link to Bodymovin on Lottie's page.

Bodymovin is an After Effects plugin created by Hernan Torrisi that exports After effects files as json and includes a javascript web player. We've built on top of his great work to extend its usage to Android, iOS, React Native, and Windows.

Step 1

In Oxygen editor, add a Section.

Set a background color if your animation is transparent.

In this example, set it to #38c172.

Advanced > Size & Spacing > Height: 100vh

Layout > Position: relative

Step 2

Add a Div inside the Section.

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $399 one-time).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?


Find the article helpful and wish to donate?



You need to be logged in to view and post comments.
Not a member yet? Join here.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: