Using your mockup animation on web pages

Keep your web visitor focused and on your site with a magical animation that can be controlled by scrolling

This tutorial shows screenshots from a previous version of Rotato, so they might look slightly different on your Mac. We will be posting an updated tutorial shortly!

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.

Please note: This technique is suited for small size and short duration animation. It works by translating each frame into a text string (base64), and adding all frames into a JSON file.

And it's pretty simple too. Here's what we'll cover in this tutorial:

  1. How to do it
  2. What will it look like?
  3. Putting it to work
    1. Option 1: Using HTML and Javascript
    2. Option 2: Using Webflow
    3. Advanced options
    4. Using a Rotato template

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. You can see an example at the top of this post, and another one below.(Grab the full projects with source code 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

Then, upload the json file to your server, add the player where you want it on your page, like this

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.

Option 2: Using Webflow

Advanced options

There's quite often a wide variety of ways to do the same thing, and that's also the case with scroll-based video scrubbing. The correct method always depends on the details: how long is your video, how big should it be, and so on. Here are some advanced techniques using the GreenSock animation library:

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

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. This means that a Rotato project rendered with Lottie rarely should be longer than a few seconds, use 30 fps and a compression quality at around 60%.

Nice to know

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

Nice to know

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