Add animation to Framer
Use Lottie JSON for the Lottie component, or export a code component when you want the animation included in the code file. Both routes start with the same editable Mosso project.
Export a Lottie file
Open an example below and click Export in Mosso.
Under Where it goes, choose Webflow or Framer (no code) and export the .json file.
In Framer, open Insert, search for Lottie and add the component. Upload your JSON file in its properties, or use a public JSON address if the component asks for a URL.
Set the component dimensions to match the animation. Turn on Loop if it should repeat, then check the preview and published page.
Use a code component
In Mosso, choose React, Vue, Svelte or Framer under Where it goes. Export and unzip the component kit.
Open the .tsx file in the framer folder. The animation data is included in that file.
In Framer, open Assets, then Code, and create a new code file. Replace its contents with the exported code.
Drag the component onto your page. Set Loop, Autoplay and Speed in its properties.
The exported component respects reduced motion and loads its player from a public address. It still needs a network connection to load that player. Framer describes Lottie support in its Lottie reference.
If the result is blank
Check that a JSON address serves the actual animation rather than a library page or a sign-in page. If the component cannot use your .lottie file, export Lottie JSON instead.
For the code route, paste the whole Framer file, including its animation data. Check the published page for blocked player requests. Give the component a visible width and height, and try the JSON in the Lottie viewer to check the file itself.
Keep essential words as page text. For the no code route, check reduced motion yourself and use a still image when a visitor should not see a loop.
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.