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 ($27/month).

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?



For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
  • Fantastic. Thanks Sridhar, as always.

    Had a feeling this was going to be similar to the Particles tut. Question: Why did you choose to keep it inside oxygen vs. the my custom functionality plugin?

  • magnifiercross
    linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
    %d bloggers like this: