Exporting

Using your mockup animation on web pages

Hi there! Struggling with transparent backgrounds? We can help.

We want to help people make better videos. If you have a moment, here's a few questions that will help us  understand this problem. In return, you'll get a free guide, and absolutely no spam.
What kind of video do you have?
...and where would you like to use it?
Want an email with a quick guide? One-time email, no sales, we just want to learn about your problem, so we can build a solution. In return, we'll give you the best way to do this today.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Rotato can export your timeline animation as a high-performing animation for the web. You can control the animation with JavaScript, and use it everywhere the Lottie format is supported - like Webflow, and even native iOS and Android apps.

How to do it

  • Add at least one keyframe to the timeline. See how.
  • Click Render Movie... in the toolbar
  • Choose Web and click Render
  • Use the JSON output file

What will it look like?

Exactly what it looks like in Rotato, but on the web. Here's a few examples (you can grab the full projects here)

Putting it to work

There's several ways to use Rotato web animations. So first, think about what you want to achieve. Do you just want a nice clean animation that instantly plays on your website? Should the animation be controlled by the user scrolling? Or maybe play as soon as the user scrolls to the animation on the page.

Option 1: Using HTML and Javascript

This is as easy as adding an image. First, include the player source in your HEAD section

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

Then, add the player where you want it on your page, like this

<lottie-player src="manual.json" background="transparent" renderer="canvas" speed="1"  style="width: 300px; height: 300px;" loop  autoplay></lottie-player>

You can control the behavior by removing or adding loop, autoplay and controls. You can also control the animation with Javascript, like below. See more examples in the documentation.

<script>
const player = document.querySelector('lottie-player');
player.seek("50%")
</script>

Option 2: Using Webflow

Using a Rotato template

You can download the full templates, source code, and Rotato project files for the web demos at the top of this page. To learn more, go to the template bundles

Watch a video

What it looks like

Nice to know

Lottie files and size
Check the size of the rendered file. Try and go for less than 10Mb, ideally even less. You can control the file size by changing Resolution and Compression in the Advanced rendering options.

Fast rendering
We recommend using fast rendering while you experiment with your animation, and then enabling High Quality once you're ready to go.

Advanced options
After clicking Render Movie... and choosing Web, you can click the Advanced button and see options.