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!

http://airbnb.io/lottie/

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.

If you would like to center the contents (headline, text etc.) set Horizontal Item Alignment to Center.

Width: 100%

Advanced > Layout > Align Items: center
Z-index: 1
Position: relative

Typography > Color: #ffffff (if you have set a dark background for the Section)

Step 3

Add your desired content inside this Div.

Ex.: Heading and Text.

Step 4

Select the Section in the Structure Panel and add a Code Block.

PHP & HTML:

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player 
    src="https://assets4.lottiefiles.com/packages/lf20_ZoYkPv.json" background="transparent" speed="1" style="width: 100%; height: 100%; display: flex; align-items: flex-end;" loop autoplay >
</lottie-player>

Replace https://assets4.lottiefiles.com/packages/lf20_ZoYkPv.json with the URL of your animation’s json file. You can host these files here.

Advanced > Width: 100%
Height: 100%

Advanced > Layout
Position: absolute
Left: 0
Bottom: 0

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

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

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: