Animation Types — Shapes & Images
Shapes and images have their own preset catalog in the Animate tab, applying one simply generates keyframes for you rather than driving a separate runtime animation. For anything a preset doesn't cover, the keyframe timeline gives full, frame-accurate control over every property.
Presets
Fade
Opacity animates from 0 to fully visible. Default duration: 750ms
Stamp
Scales in from 2× down to normal size, with a fast fade over the first 80ms — an "impact stamp" zoom-in. Default duration: 200ms
Pop
Scales up from nothing, overshoots to 1.2× at the halfway point, then settles back to normal size — a bouncy pop-in. Default duration: 600ms
Slide
Moves in from off-canvas while fading in. Direction: ↑, →, ↓, ← Default duration: 500ms
Scale
Scales from a smaller size (In, starts at 25%) or a larger size (Out, starts at 200%) to normal. Direction: In, Out Default duration: 500ms
Rotate
Spins into place — 90° by default, clockwise or counter-clockwise. Direction: ↻, ↺ Default duration: 600ms
Wipe also appears in the underlying preset catalog but is currently disabled and can't be selected — a known bug where its clipPath reveal doesn't render on canvas.
Roll and Flip exist in the same catalog, but they're built for the value-change reaction on live widgets (a Counter's number ticking, a Clock updating) rather than a shape or image's entrance/exit — Roll is a split-flap/odometer effect, Flip is a rotate-and-cross-fade. Picking either for a shape or image's entrance/exit falls back to a generic version (Roll behaves like Slide; Flip like Rotate with a fade), so they're not likely to be what you want here.
What you can animate
Common things to animate on shapes and images:
| Property | What it creates |
|---|---|
| Position (X, Y) | Slides, fly-ins, movement across the canvas |
| Size (Width, Height) | Scaling up or down, growing/shrinking effects |
| Scale (X, Y) | Growing/shrinking around the anchor point |
| Opacity | Fades in or out, flashes |
| Angle | Spinning, tilting |
Colours and stroke width are set once in the Properties panel — they aren't keyframeable.
Building a slide-in bar (example)
A lower-third bar that slides in from the left is one of the most common broadcast graphics animations. Here's how to build it with keyframes:
- Place your bar shape on the canvas in its final resting position.
- Move the scrubber to frame 0.
- Move the bar completely off the left edge of the canvas — this is your start position. A keyframe is recorded.
- Move the scrubber to 0:00.500 (half a second later).
- Move the bar back to its final position. Another keyframe is recorded.
- Hit Play — the bar slides in over 500ms.
Apply an Ease Out easing on the second keyframe to make it settle naturally into place.
For a bar that also slides out, add two more keyframes at the end of the timeline: one at your hold position, and one with the bar off-canvas again.
Building a fade-in image (example)
- Select the image and move the scrubber to frame 0.
- Set Opacity to 0 in the Properties panel. Keyframe recorded.
- Move the scrubber to 0:00.450.
- Set Opacity to 1. Keyframe recorded.
- The image fades in over 450ms.
Combining with text animations
A powerful technique: use keyframe animation on a shape (e.g. a bar sliding in) and trigger a preset text animation (e.g. Fade or Reveal) on the text that sits on top. Time the text animation to start just as the bar finishes sliding in — creating a polished two-step reveal.
You control timing between the bar and text by adjusting where the keyframes sit on the timeline. There's no strict rule — experiment with offsets of 100–300ms to find what feels right.