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
And it's pretty simple too. Here's what we'll cover in this tutorial:
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.
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
<lottie-player src="/path/to/your-rotato-exported-file.json" background="transparent" renderer="canvas" speed="1" style="width: 300px; height: 300px;" loop autoplay> </lottie-player>
<script> const player = document.querySelector('lottie-player'); player.seek("50%") </script>
Option 2: Using Webflow
- Drop the rendered .json file in your Asset Manager
- Click Add Elements, then choose Lottie
- Take Webflow's free course in Lottie and Webflow
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:
- Codepen: Scrub a special-encoded video file with scroll
- Codepen: Scrub an image sprite on scroll
- Codepen: Scrub individual png frames using frames Apple's AirPods Pro landing page.
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