Docs and how-to guides

Start here

Guides

Guide 1 · 2 min readMake an animation from scratchStart on a blank canvas, add layers, animate them and export a Lottie.
Guide 2 · 2 min readEdit a templateOpen a template in your brand, change the words and the timing, then export it.
Guide 3 · 2 min readSet up your brand kitSave your colours, fonts, logo and motion style for new projects.
Guide 4 · 2 min readKeyframes and easingHow keyframes work, how to move and copy them, and how to shape the motion between them.
Guide 5 · 2 min readAnimate textBring text in by letter, word or line, with eight styles and your own timing.
Guide 6 · 3 min readExport and put it on your sitePick the right format, export it, and put it on a website, in an app or in a video.
Guide 7 · 2 min readImport Lottie, SVG and picturesOpen Lottie files, bring in SVGs and pictures, and send designs over from Figma.
Guide 8 · 3 min readConnect your own AIUse Mosso from Claude Desktop, Claude Code or Cursor with mosso-mcp.

Good to know

Quick answers

Which file should I export?

For	Export
A website or app	Lottie JSON or dotLottie
A plain image tag	Animated SVG
Instagram, TikTok, LinkedIn	MP4
Email and chat	GIF
A video editor	PNG frames or transparent WebM

The export guide

Still stuck?

Write to us at hello@mosso.video and tell us what you were trying to make. A screenshot helps. If a guide here is wrong or missing a step, we want to know that too.

Keyboard person? The shortcuts are on the editor page, and ? shows them all inside the app.

Try these animations

Open an example to try its colours and timing, or edit it in Mosso.

Browse the animation library

Guides by destination

Add animation to WordPress
Export Lottie JSON from Mosso, host the file and add it to WordPress. Includes a copyable embed and fixes for blocked uploads or scripts.
Add animation to Webflow
Export Lottie JSON from Mosso and add it to a Webflow Lottie element. Set playback, keep the right proportions and check the published page.
Add animation to Framer
Use Lottie JSON or a Mosso code component in Framer. Export the right file, set playback and check the animation on your published site.
Make Telegram stickers
Make a Telegram sticker with the Mosso export preset. Check size, duration and unsupported features, then upload the TGS file to a sticker pack.
Make Discord emoji
Export a small animated GIF with the Mosso Discord emoji preset. Check file size, upload it to your server and understand the permission limits.
Export transparent WebM
Export transparent WebM from Mosso for a website or video overlay. Check the background, embed the video and choose a fallback when alpha fails.

Lottie in code

Lottie in HTML
Play a Lottie or dotLottie file on any web page with the dotLottie web component. Copy a working example that respects reduced motion, then fix common problems.
Lottie in React
Use Lottie in React with @lottiefiles/dotlottie-react. Install it, copy a component that respects reduced motion, and fix the problems people hit most.
Lottie in React Native
Play Lottie animations in React Native with lottie-react-native. Install it, copy a component that respects Reduce Motion, and avoid the usual mistakes.
Lottie in Flutter
Play Lottie animations in Flutter with the lottie package. List the asset, copy a widget that respects reduced motion on Android and iOS, and fix common errors.
Lottie in SwiftUI
Play Lottie animations in SwiftUI with Airbnb's lottie-ios. Add the package, copy a LottieView that respects Reduce Motion, and fix the usual problems.
Lottie in Jetpack Compose
Play Lottie animations in Jetpack Compose with lottie-compose. Add the dependency, copy a composable that pauses when animations are off, and fix common errors.

Docs