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 $599 one-time).
Already a member? Log in below or here.