Animation blocks

An animation block is one timed change to one or more shapes, such as a shape moving to a new spot or a text fading in. With blocks you can:

• Create them: select shapes and choose a block in the Actions panel.
• Time them: set when they start and end, how long they last, and their speed.
• Shape the change: choose an easing curve, and stagger several shapes or the letters of a text.
• Edit them on the board: drag their indicators to set where a shape moves, turns, or grows.
• Reassign, copy, and delete them: give an animation to other shapes, or remove it.

Which controls a block has depends on its kind. Each kind has its own page: Transforming shapes, Revealing and hiding shapes, Animating cameras, Animating videos, Animating audio, and Animating attributes.

Targets

The targets of a block are the shapes it acts on: one shape, or several. Each kind of block fits some kinds of shape: a Video Animation only fits videos, and camera blocks only fit cameras.

To create a block from the Actions panel:

1. In Animation mode, select its target shapes on the board. Selecting a group targets the animated shapes inside it.
2. Choose the block in the Actions panel, which only offers the blocks the selected shapes can take.

You can change the targets later with Reassign targets.

The default animation block

A new block is a default animation block: it's already on the timeline with starting values, so you can create it first and decide later what it changes and when. A default block:

• Start: it starts at the playhead and is selected, so you can set it up right away.
• No change yet: some blocks, such as Position and Rotation, change nothing until you set their values.
• Playhead: creating an Audio or Text Sequence block moves the playhead to its end.

Set it up in this order:

1. Set its start and end values: how the shape is when the block starts and when it ends, such as the place a Position Animation starts from and the place it ends at.
   • Attributes panel: the block's section shows the values its kind offers.
   • Block indicators: blocks that animate how things are placed on the board, such as their position, angle, or size, also show handles there, so you can adjust them right on the shape.
   • Maintain speed: with it on, changing a value adjusts the block's timing so its speed stays the same.
2. Set its start and end times: type them in Time, or set how long the block lasts in Duration to give several blocks the same length. You can also drag the block's bar in the Timeline panel.
3. Set its easing: how the change speeds up and slows down. See Easing.

Block speed

Each kind of block has a base speed, such as board units per second for a move or characters per second for typed text. A block's Speed multiplies that base speed, so blocks with the same Speed move at the same rate, which keeps similar movements consistent.

The Speed of a block

Set Speed in the block's section of the Attributes panel. Speed and Duration are linked: change one and the other updates, so set whichever matters to you:

• Speed: to move at the same pace as other blocks. 1 is the base speed of the block's kind, 2 is twice as fast, and 0.5 is half as fast.
• Duration: to make the block last a set time.
• Start stays: either way, the block keeps its start and its end moves.
• Easing: Speed sets the average pace, and the block's easing still decides where it speeds up or slows down.

Base speeds

Animation settings, at the right end of the Timeline panel header, holds the base speeds for the whole board.

Values are per second: px is board units, deg is degrees, % is percent, and c is characters. Read speed sets how long each text of a Text Sequence stays on screen, based on its length.

Changing a base speed keeps the timing of the blocks you already made: their Speed changes instead. New blocks use the new base speed.

Block indicators

An indicator shows on the board what a block does, with handles you can drag while the animation is stopped, instead of typing values. These blocks show one:

• Position
• Rotation
• Scale and Resize: they share the same indicator. Dragging it grows or shrinks the whole shape with Scale, or changes its width and height with Resize.
• Path Crawl
• Camera Zoom
• Stroke, for its follower image

Which indicators are shown

Choose which ones you see with Show all animation indicators, in the Timeline panel header:

• Off, the default: selecting shapes doesn't show their indicators. To see one, select its block in the Timeline panel.
• On: selecting shapes shows the indicators of all their current and future blocks. Blocks that already ended at the playhead stay hidden.

A selected block always shows its indicator, even outside its time span. Which handles you can drag depends on the block and on whether the animation is playing.

Selecting blocks

Select a block to see its controls: the Actions panel offers what you can do with it, and the Attributes panel shows its settings. Select it in one of two ways:

• Timeline panel: select its bar. See Selecting blocks in the Timeline panel for selecting several.
• Board: select its indicator.

Changing the shape selection clears the selected blocks.

Selecting several blocks

With several blocks selected, the Attributes panel shows the settings they share:

• Time and Duration: the timing they share.
• Speed: when every selected block has one.
• The kind's own section: when all the blocks are of the same kind. Stagger shapes isn't shown.
• Different values: a shared number field shows --- when the blocks differ. Typing a value sets it on all of them.

Attributes

With one block selected, the Attributes panel shows its settings. Which ones depends on its kind:

• Time and Duration: when the block runs and how long, plus Speed on some blocks. See Timing.
• Block values: what the block changes, such as an angle, a distance, or an opacity, explained on each kind's page.
• Stagger shapes: for a block with two or more targets. See Stagger shapes.
• Stagger text: for some blocks on text. See Stagger text.
• Easing: how the change speeds up and slows down. See Easing.

Timing

The block's section has these timing fields:

• Time: when the block starts and ends, in seconds. Like the ruler, it counts the hold time of pause markers.
• Duration: how long the change takes, from 0.01 seconds:
  • It doesn't count pause markers, so it can be shorter than the gap between the two Time values.
  • In the Timeline panel, some blocks can be shortened to an instant.
• Speed: on the blocks that have one, how fast the change goes. See Block speed.

Maintain speed

Stagger shapes

For a block with two or more targets, Stagger shapes makes them start one after another instead of together:

• Stagger shapes: turns it on. Then set Delay, or choose End in Ref, to space the shapes apart.
• Delay: the time between one shape and the next, in seconds.
• Ref: where the delay counts from:
  • Start: the start of the previous shape's animation.
  • End: the end of the previous shape's animation.
• Reordering panel: a switch that shows or hides the list of the block's shapes, in the order they start.
  • Change the order: drag a shape by its grip.
  • Find a shape: point at it in the list to highlight it on the board.

In the Timeline panel:

• Bar: the block's bar covers everything from the first shape's start to the last shape's end.
• Turning it off: keeps that length, so each shape's animation stretches to fill it.
• Changing Ref: keeps the length, and each shape's animation gets shorter or longer to fit.
• Limit: where blocks can't overlap, Delay is limited to the space available.

Stagger text

Stagger text animates a text one character or word at a time. It works on:

• Plain text: Position, Opacity, and Scale blocks.
• Text on a path: Opacity and Path Crawl blocks. With Path Crawl, each character follows the path and turns with it, a little later than the one before.

The controls:

• Stagger text: turns it on. With Ref on Start and Delay at zero, it sets Delay to 0.05 seconds.
• Delay: the time between one unit and the next, in seconds.
• Ref: where the delay counts from:
  • Start: the start of the previous unit.
  • End: the end of the previous unit.
• Order: which end of the text starts first:
  • Forward: the first unit.
  • Reverse: the last unit.
• Unit: what moves on its own:
  • Characters: each character, spaces included. Emoji and accented letters count as one character, and a text in Arabic or another joined script moves by word so its letters stay joined.
  • Words: each word, with the spaces after it.

How the timing works:

• Units: each unit has its own animation length. The block's Duration includes the whole staggered sequence, and its bar ends with the last unit.
• Turning it off: removes the offsets between units. Stagger shapes and pauses still apply.
• Changing Ref or Unit: keeps the bar's length, and each unit's animation gets shorter or longer to fit.
• With Stagger shapes: Stagger shapes spaces the shapes, and each text spreads its units from its own start.

Two cases shorten the units so they end before the next block of the same kind on that text:

• Longer delay or longer text: the delay between units shortens first, then the units' animation.
• A new block during the staggered end: creating a block while an earlier block's staggered end still runs shortens that end to make room. An earlier block still running its main animation keeps its timing.

With the playhead at the block's end, changing a stagger setting moves the playhead to the new end, so the next block you create starts after the last unit.

Easing

Easing controls how the change progresses over time: slowly at first, quickly, with a bounce, and so on. Most blocks start with Cubic; Audio and Video blocks start with Linear.

On the curve, the horizontal axis is time, and the vertical axis is progress, from 0 at the start to 1 at the end. Curves such as Back or Elastic go past 0 or 1 on the way.

Easing moves a value between its start and its end, so a block whose start and end are equal doesn't change, whatever the curve:

• An opacity block from 20% to 80% is at 35% when the curve's progress is 0.25.
• To fade out and back in, use two blocks: one that fades out, and one that fades back in.
• A Position Animation moves along its path, so even a path that ends where it started moves the shape. Easing sets how fast it goes along the path.

The controls:

• Mode: Default builds the curve from standard curves, and Custom lets you draw it.
• Copy easing from animation: then select a compatible block in the Timeline panel to copy its curve.

Default easing

Custom easing

Floating window

Easing exceptions

Actions

In Animation mode, the Actions panel offers these actions for the selected blocks or shapes.

Block actions

For selected blocks. To pause them, see Create Block Pause in Animation pauses.

Cut, copy, and paste blocks

Reassign targets

Shape animation actions

For selected shapes.

Copy animation from shape

Deleting animation

Removes animation. The same button in the Actions panel does it, and what it removes depends on what's selected.

• Operation: choose the delete button in the Actions panel:
  • Delete, with blocks selected: removes only those blocks.
  • Delete Animations, with shapes selected: removes all their blocks, in every sequence.
• Result:
  • Pauses: block pauses go with their blocks, except a pause shared with other blocks, which stays for them.
  • Shared blocks: a block that also animates other shapes stays for those shapes.
  • Shapes: go back to their starting values for anything no longer animated. A camera keeps the zoom it ended with.