Skip to main content

Search

Universe Help Center

How To Add Animations to Your Site

Braden Boothby
  • Updated

The Code Block will allow you to embed animations right on your site!

Using iFrame, the Code Block will allow you to display Lottie animations on your website! Created by the developers behind Airbnb, Lottie is: a library that renders After Effects animations in real time anywhere you want (such as a website)!

In the guide below, we will be using Lottie Files (lottiefiles.com) which offers tons of free animations along with the Code Block included with Universe Pro.

Grabbing the embed code: 

  • Head over to lottiefiles.com
  • From here, you can search for anything you want or check out the featured animations here: lottiefiles.com/featured
  • Click on the desired animation
  • Once the animation pops up, choose the HTML option under the 'Use this animation in' heading

Screen_Shot_2021-03-09_at_6.23.45_PM.png

  • A new tab will open. On the new tab, you are able to edit how the animation is displayed on your site. It is best to uncheck the Controls option and set the height and width as 100% (as shown below)

Screen_Shot_2021-03-09_at_6.27.02_PM.png

  • Once you're done. customizing the animation, you can copy the code to paste in the Code Block! The code will look something like this (but with your animation instead):
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets8.lottiefiles.com/datafiles/0cjunjXZVrOzIAb/data.json"  background="transparent"  speed="1"  style="width: 100%; height: 100%;"  loop  autoplay></lottie-player>

You can check out the sample watermelon animation here: icebox.onuniverse.com/animations

 

🌟 The Block may appear empty in the Grid Editor, so Publish your site and view it on the web to see your embedded content. Then return to the Grid Editor and make any adjustments to the size of your Code Block as needed.