Editor
A real timeline when you want control
Most people never need it, because the AI and the templates get them most of the way. But when you want to move one keyframe by one frame, or draw your own easing curve, the whole timeline is one click away. It runs in your browser and saves as you go.
Timeline
Keyframes on every property
Position, scale, rotation, opacity and the rest each get their own row. Drag keyframes along the timeline, copy them and paste them at the playhead, jump between them with J and K, and nudge them one frame at a time.
- Scrub the playhead to check any frame.
- Set the length, the frame rate and the background in canvas settings.
- Lock and hide layers, and group them to move them together.
Easing
Easing curves, springs and presets
Every move between two keyframes has an easing: how it speeds up and slows down. Pick a curve, a spring, linear or hold, start from a preset, then drag the two handles until it feels right. Try some presets here.
Keyframes and easing guideOvershoot. Goes a little past the end, then settles back.
Presets
Ready-made motion in one click
The Animate menu has moves for bringing things in, taking them out, drawing the eye and keeping them moving. Each one turns into normal keyframes you can change. Select several layers and they follow each other: top first, bottom first or in random order.
- Rise inRises into place while it fades in.
- Pop inGrows from nothing with a little bounce.
- Spin inSpins and grows into place.
- Draw onDraws its outline from start to end.
- PulseGrows a little and settles back.
- ShakeShakes side to side, like saying no.
- BounceJumps up and lands, twice.
- FloatDrifts up and down, on repeat.
Text
Text that comes in letter by letter
Turn on text animation and pick how it arrives: rise, fade, pop, drop, slide, spin, typewriter or soft in. Animate by letter, word or line, set the gap between them, and play it out again at the end if you want.
Text animation guideDrawing
Draw your own, or bring it in
Rectangles, ellipses, text and a pen for any other shape. Double-click a shape to edit its points. Paste SVG, drop in pictures, or open a Lottie from anywhere. Your logo comes in from the brand kit as shapes, ready to draw on or pop in.
Importing filesEffects
Effects you can change
Confetti, fireworks, snow, sparkles and loaders are built from settings. Change the colours, the amount and the timing, and they stay sharp and in your brand at any size.
Canvas sizes
Sizes for wherever it goes
Start from a preset or type your own size, anywhere from 16 to 4,096 pixels a side. Drawn here to scale.
- Square post1080 × 1080
- Portrait post1080 × 1350
- Story or Reel1080 × 1920
- Landscape video1920 × 1080
- X post1600 × 900
- LinkedIn post1200 × 1200
- Website hero1600 × 900
- Web banner1200 × 400
- Phone screen390 × 844
- Icon512 × 512
- Loader400 × 400
- HD 720p1280 × 720
Shortcuts
Keyboard shortcuts
The ones people use most. Press ? in the editor to see them all. On a Mac, Cmd does what Ctrl does on Windows.
| Tools | Keys |
|---|---|
| Select and move | V |
| Rectangle | R |
| Ellipse | O |
| Text | T |
| Pen | P |
| Hand, to move the view | H |
| Timeline | Keys |
|---|---|
| Play or pause | Space |
| Previous frame (add Shift for 10) | , |
| Next frame (add Shift for 10) | . |
| Previous keyframe | J |
| Next keyframe | K |
| Change the easing of the selected keyframes | E |
| Move selected keyframes by a frame | AltArrows |
| Editing | Keys |
|---|---|
| Undo | Cmd or CtrlZ |
| Redo | Cmd or CtrlShiftZ |
| Duplicate | Cmd or CtrlD |
| Group | Cmd or CtrlG |
| Ungroup | Cmd or CtrlShiftG |
| Nudge (add Shift for 10 pixels) | Arrows |
| Opacity from 10% to 100% | 1 to 0 |
| View and files | Keys |
|---|---|
| Zoom to fit | Shift1 |
| Zoom to 100% | Shift0 |
| Export | Cmd or CtrlE |
| Every shortcut | ? |
Export
What you make here exports cleanly
- Text is saved as shapes, so nobody needs your fonts to see it right.
- Files never carry expressions, the small scripts some Lottie files hide, so they are safe in every player.
- We check what Mosso makes in lottie-web and the dotLottie player, the main ones on the web.
- Exports are made on your computer. Nothing gets uploaded.
FAQ
Questions about the editor
Do I need to know animation to use it?
No. Most people start with the AI or a template and only open the timeline to fix one thing. The editor has a short "How animation works" guide under Help if you want the basics.
Which browsers does it work in?
Chrome, Edge, Firefox and Safari on a computer. MP4 export works best in Chrome and Edge. In other browsers, export WebM or GIF.
Does it save my work?
Yes, as you go, in your browser. With a free account your projects also sync, so you can open them on another computer. If you lose your connection, keep working: changes upload when you are back online.
Can I open files from After Effects?
Yes, if you export them as Lottie first (with the Bodymovin plugin, for example). Mosso opens the file and shows you which parts you can edit.
Can I undo what the AI did?
Yes. Every change, yours or the AI's, is one step in the same undo history.