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.
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
Add a Div inside the Section.
If you would like to center the contents (headline, text etc.) set Horizontal Item Alignment to Center.
Advanced > Layout > Align Items: center
Typography > Color: #ffffff (if you have set a dark background for the Section)
Add your desired content inside this Div.
Ex.: Heading and Text.
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>
Advanced > Width: 100%
Advanced > Layout
Please log in again. The login page will open in a new tab. After logging in you can close it and return to this page.