Opacity Animation

Fading shapes in or out, or to any opacity in between.

The same ninja at 100%, 50%, and 0% opacity, with the background unchanged.

Opacity animation changes the opacity of shapes over time: it fades them in, out, or to any opacity in between.

It works on every shape except cameras.

With it you can:

  • Fade shapes in or out: a fade can also stop at any opacity in between.
  • Fade several shapes together: one block fades them all, at the same time or one after another.
  • Fade a text letter by letter: with Stagger text, its characters or words appear one after another.

Creating it

Opacity Animation in the Actions panel.

Adds a block that fades the selected shapes in or out.

  • Operation:
    1. Select the shapes on the board.
    2. In Animation mode, choose Opacity Animation in the Actions panel.
  • Result: a selected block starts at the playhead and fades the shapes.
    • First opacity block: the shape fades in from 0 to the opacity set on it.
    • Later opacity blocks: the block starts from the shape's opacity at the playhead.
      • Fully transparent: the shape fades in to the opacity set on it.
      • At the opacity set on it: the shape fades out to 0.
      • Partly faded: the shape finishes fading in.
    • Duration: it follows the change in opacity at the board's base opacity speed. At the default speed, a fade from transparent to fully opaque lasts one second.
    • Continue from its end: the playhead moves to the end of the block, so the next block you create starts where this one stops.

With several shapes

Several shapes at different opacities, with their selected animation block in the Timeline panel and its attributes visible.

When you select several shapes, one opacity block fades all of them. The block holds one start and one end opacity for every shape, so shapes with different opacities meet at their average:

  • No opacity block yet: they fade in from 0 to the average of their own opacities.
  • All transparent at the playhead: they fade in to that average.
  • All at their own opacity: they fade out to 0.
  • Anything else: the block starts from their average opacity and fades them in the rest of the way, so each shape first takes that average.
  • One after another: turn on Stagger shapes and give it a Delay. See Stagger.

The opacity animation block in the Timeline panel

Timeline blocks numbered 1 for one shape, 2 for several shapes, and 3 for staggered shapes.

In the Timeline panel, opacity blocks appear in slate ().

  1. Blocks that animate one shape use circular handles.
  2. Blocks that animate several shapes use square handles.
  3. Staggered blocks show a marker where each later shape starts.

On the board

The block has no indicator or handles. You set it in the Attributes panel.

While it runs, an opacity block controls the whole shape's transparency, so a stroke block on the same shape skips its own fill and label reveal. See Stroke Animation.

Attributes

An opacity block's settings are in the Opacity Animation section of the Attributes panel.

Timing

Time, Duration and Speed of an opacity block.
  • Time: when the fade starts and ends, in seconds. Each time is outlined while the playhead sits on it.
  • Duration: the block's total length, including staggered shapes and block pauses.
  • Speed: speed multiplier relative to the board's base opacity speed (100 percent per second by default).
    • It measures the change in opacity, so a fade over a larger range takes longer at the same speed.
    • Changing it changes the block's duration.

Opacity

Start and end opacity of an opacity block.
  • Opacity: two values, the opacity at the start and at the end, from 0 for transparent to 1 for opaque.
    • The parts of a shape, such as its fill and its stroke, fade together and keep their transparency relative to each other.
    • An end below the start fades the shapes out.
    • Maintain speed, in the Timeline panel header, decides what happens when you change a value:
      • On: the speed stays and the duration adjusts.
      • Off: the duration stays the same.

Stagger

Shape and text stagger controls for an Opacity Animation block.
  • Stagger shapes: starts the shapes' fades one after another. See Stagger shapes.
  • Reordering panel: with Stagger shapes on, sets the order in which the shapes start. See Stagger shapes.
  • Stagger text: on texts, fades the characters or words in one after another. See Stagger text.

Easing

Default easing with cubic acceleration and deceleration.
  • Easing: controls how the fade speeds up and slows down. Cubic in and out is the default. See Easing.

Actions

Delete, Cut, Copy, Paste, Reassign, and Create Block Pause in the Actions panel.

With an opacity block selected, the Actions panel offers these block actions: