Exactly what it looks like in Rotato, but on the web. Here's a few examples (you can grab the full projects with source code here)
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.
This is as easy as adding an image. First, include the player source in your HEAD section
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>
const player = document.querySelector('lottie-player');
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
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%.
We recommend using fast rendering while you experiment with your animation, and then enabling High Quality once you're ready to go.
After clicking Render Movie... and choosing Web, you can click the Advanced button and see options.