01 · STEP
Slides are your pages
The clever bit: the Animation Studio doesn't add a new timeline to learn — each page of your document is a slide. Design your pages as normal, then time and animate them here.
- Make a few pages. Add 3 pages — these become slides 1, 2 and 3. (Example: a logo, then the logo + tagline, then the full lock-up.)
- Open Animate. Studios → Animate. The panel shows slide timing and per-object effects.
- Set the Mode to Slides for a presentation/reveal (we'll cover Stop motion later).
02 · STEP
Time your slides
- Set the Hold. Per slide, Hold (s) is how long it stays on screen before moving on — try 2–3 seconds.
- Pick the transition length. Trans (s) sets how long the move into the next slide takes (0.5–0.8s feels snappy).
- Repeat per slide. Each slide can have its own hold and transition — vary them for rhythm.
03 · STEP
Transitions & the Morph magic move
The Go to next menu sets how one slide becomes the next:
| Transition | What it does |
|---|
| Cut | Instant change — no animation. |
| Crossfade | One slide dissolves into the next. Classy and safe. |
| Push | The new slide pushes the old one off — good for steps/sequences. |
| Wipe | The new slide sweeps across the old one. |
| Morph (magic move) | Objects that appear on both slides glide, scale and recolour smoothly between them — the premium, Keynote-style effect. |
Make Morph sing Put the same object (your logo) on slide 1 small in the centre and on slide 2 larger in the corner. Set the transition to Morph — it animates between the two positions automatically. That's your reveal.
04 · STEP
The Timeline
When you open the Animation Studio, the Timeline docks along the bottom of the canvas. It's the control room for when everything happens — and it's designed to feel like the timeline in professional tools (After Effects, Animate, Blender all work this way), so the skills carry across.
Every object on the current slide gets its own row. Each effect you add shows up as a coloured bar on that row:
Green — Appear
Amber — Attention
Red-violet — Leave
Violet — Travel
- Move an effect in time. Drag a bar left or right to change when it starts. A read-out shows "starts 1.2s, lasts 0.8s".
- Change how long it lasts. Drag the bar's right edge. Everything snaps to tidy tenths of a second.
- Scrub the playhead. Drag the ruler (or click a lane) to move the playhead — the canvas previews that exact moment.
- Play it. Press ▶ or the Space bar to play; ↺ loops the slide. Arrow keys step 0.1s, Home/End jump to the ends.
- Zoom & tidy. Use −/＋ to zoom the time scale; hide the dock with ⌄ and bring it back from the ▴ Timeline chip.
The golden rule Add effects by clicking an object and choosing Appear / Attention / Leave / Travel — the new bar lands at the playhead. Then use the timeline to slide it to the exact moment you want.
05 · STEP
Animate objects — Appear, Attention, Leave
Beyond whole-slide transitions, each object can have its own entrance, emphasis and exit. Click an object (on the slide, or its row in the timeline), then add effects:
＋ Appear — how it arrives (fade, grow, slide, draw-on)
＋ Attention — while it's on screen (pulse, spin)
＋ Leave — how it exits
- Stagger entrances. Give the tagline an ＋ Appear that starts a little after the logo's — drag its bar in the timeline. Staggering reads as polished, not mechanical.
- Add attention sparingly. A single pulse or spin on the key element draws the eye; too many fight each other.
- Use Leave to hand over. A ＋ Leave on a slide's objects hands over cleanly to the next slide.
- Animate lots of things together. Give each object its own effects — they all play at the same time. Line up their bars in the timeline to fire together, or stagger them to cascade.
06 · STEP
Travel — draw a motion path
Make an object travel along a route you draw — perfect for a product sliding in, a dot tracing a map, or a mascot walking across. No need to draw a line first; you draw the route as part of the effect.
- Click the object, then ＋ Travel along a path.
- Draw the route. Click a spot on the slide, then another, then another — each click drops a dot and the object moves dot-to-dot. You can also press and drag to trace a wiggly path.
- Press ✓ Done (or Undo dot / Cancel). The dotted purple guide line only shows while editing — it's hidden in the finished video.
- Face the direction. Tick rotate so the object turns to face the way it's travelling. Use ✎ Redraw path to change the route.
- Tune the timing in the timeline so the travel finishes within the slide.
07 · STEP
Groups & photos
You can animate more than single shapes.
- A whole drawing, as one. If your artwork is several shapes, select them and group them (Ctrl/Cmd+G). The group shows as a single row in the timeline and animates as one object — it slides, spins, fades and travels together without falling apart.
- Photos and imported images. A bitmap photo is one object — click it and add Appear, Attention, Leave or Travel. (Draw-on is for line art, so use the others on a photo.)
- Text animates the same way — great for titles that fly or fade in.
08 · STEP
Stop motion
For hand-made, frame-by-frame animation, switch the Mode to Stop motion 12 fps or 24 fps.
- Use Onion skin. Turn on Onion skin to see the previous frame ghosted under the current one, so you can line up small movements.
- Add frames. + Frame duplicates the current page as the next frame; nudge things a little, repeat.
- Play it back to check the motion flows.
Locked background Set a Locked background photo that spans several slides/frames and stays still while your objects animate over it — ideal for explainers and product demos.
09 · STEP
Preview & export
- Preview. Hit ▶ Preview to play the whole thing in the canvas. Adjust timing until it flows.
- Export video. Export video… → choose MP4 (best everywhere), WebM, GIF, or a PNG frame sequence for editors.
- Export for the web. Pick Animated SVG or Web page (.html) for a crisp vector animation that drops straight into any website — it keeps your keyframes, easing and camera, loops on its own, and stays razor‑sharp at any size.
- Ship to apps (Lottie). Choose Lottie (.json) to export a Bodymovin‑style Lottie that developers drop into iOS, Android or web apps — the same format used across the industry. Preview it at lottiefiles.com.
- Pick a size & rate. Up to 4K, plus social presets (1080×1080 feed, 1080×1920 reels/stories), at 24 / 30 / 60 fps. Export the whole document or a single slide.
Tools you used
SlidesTimeline (drag bars, scrub, play)Hold & Trans timingCrossfade / Push / WipeMorph (magic move)Appear / Attention / LeaveTravel (motion paths)Groups & photosStop motion + onion skinLocked backgroundMP4 / WebM / GIF / PNG export