Add animation to Webflow
Start with Lottie JSON. It is the format Mosso picks for the Webflow or Framer destination, and it gives Webflow a file it can control through its Lottie element.
Export for Webflow
Open an example below and edit it in Mosso.
Click Export. Under Where it goes, choose Webflow or Framer (no code).
Export the .json file. Keep the project if you want to change the animation later.
Add the Lottie element
In Webflow, upload the JSON file through the Assets panel.
Open Add, then Media. Drag a Lottie animation element onto the page.
Choose Replace Lottie sequence and select the uploaded file.
Set the element width and height to match your animation proportions. Turn on Loop if the piece should repeat.
Publish the page and check it on a phone as well as a computer.
Webflow also accepts dotLottie files. Use JSON for this workflow so your file matches the Mosso destination and the steps shown after export. Webflow explains both formats in its Lottie element guide.
Check playback and layout
If the animation plays once before anyone sees it, use a Webflow interaction to start it when it enters view. Avoid combining an interaction with another playback setting that controls the same animation.
For a blank element, first check the file in the Lottie viewer. If it works there, replace the uploaded sequence and check the element dimensions. A wide animation squeezed into a square will leave empty space.
For visitors who prefer reduced motion, show a still image instead of an autoplaying loop. Keep the message in normal page text so it remains readable even when the animation is stopped.
Free downloads and editable examples
The editor and every export format are free, with no card and no Mosso watermark. Library downloads need a free account. You can download up to 50 library animations a day, with the limit resetting at midnight UTC. Each download contains one animation.
Open an example below to try its look. Use its download buttons to get Lottie JSON or dotLottie through your account, or choose Edit this in Mosso to change the layers and export another format. A preview file is for playback, not an account download link.
Create a free account or sign in to download from the library. Read the library licence before sharing the finished work.
Try these animations
Open an example to try its colours and timing, or edit it in Mosso.