Animating attributes

Attributes Animation changes attributes of shapes over time, such as a stroke getting thicker or a fill turning from red to blue. Use it for attributes no other block covers: moving, rotating, scaling, and resizing have their own transform blocks, and showing or hiding shapes has reveal blocks.

With it you can:

• Pick the attributes to change: among the shape's own attributes, the same ones you style it with.
• Give each shape its own values: every shape keeps its own start and end.
• Time the change: its timing, its easing, and an optional stagger between shapes.

You set each attribute's start and end values in the block's rows, or in the shape's own inputs at the block's start or end. See Start and end values.

Creating it

Adds a block that changes the attributes you pick.

• Operation:
  1. Select one or more shapes on the board.
  2. In Animation mode, choose Attributes Animation in the Actions panel.
  3. Select the diamonds of the attributes to animate. See Picking attributes. The Actions panel lists each picked attribute with its Start and End values.
  4. Use Start and End to set each attribute as it should be at the block's start and end. See Setting the start and the end.
  5. Choose Accept in the Actions panel, or Cancel to stop without creating anything.
• Result: a one-second block starts at the playhead, selected, with its section in the Attributes panel. Unless you changed them while picking, every shape starts and ends at its current value, so the board stays as it is until you set a start or an end value.

Picking attributes

While you pick, a diamond appears next to every input that can be animated:

• Dimmed diamond: the attribute isn't in the block yet. Select it to add it.
• Filled diamond: the attribute is in the block. Select it again to remove it.
• No diamond: the input can't be animated, such as a code editor's language.

The Actions panel previews the picked attributes in a list, with their Start and End values:

• Edit a value: change it in its Start or End column.
• Remove an attribute: select beside it, like selecting its diamond again.

The selection stays fixed while you pick. When a diamond can't be picked, its tooltip says why, such as an attribute that has a block of its own, like position or rotation.

Setting the start and the end

While you pick, Start and End, above the list of picked attributes, take the board to the block's start or its end. The shapes show as they are there, so you set each attribute directly in that state:

• Start: set the attributes as the animation begins.
• End: set them as it finishes.

This lets you animate attributes that exist at only one end. A fill that starts as No fill has no color to pick at the start: choose End, set the fill to Solid fill in red, and pick its color there.

With several shapes

• One block for all: it animates all the shapes, and each shape keeps its own start and end values.
• Shapes without an attribute are left out of it: the attribute's row in the block's section says how many shapes it applies to, such as 2 of 3 shapes.
• Change them one after another: turn on Stagger shapes and set Ref to End. See Stagger and easing.

How values change

Any attribute with a diamond while you pick can be animated. How its value moves from start to end depends on the kind of value:

• Values that can blend, such as colors and numbers: they change gradually, following the block's easing.
• Values that can't blend, such as styles and on/off switches: they switch to the end value halfway through the eased change. With a curve that goes past its end and back, such as Back or Elastic, they can switch back and forth.

The attributes animation block in the Timeline panel

In the Timeline panel, attributes blocks appear in yellow ().

• Handles show what the block animates: circular for one shape, square for several shapes, and camera-shaped on a camera.
• Stagger markers: staggered blocks show a marker where each later shape starts.
• Switch strip: when the block animates values that can't blend, such as styles or on/off switches, a strip inside it shows which value is in use: thin while the start value shows, thick once the end value takes over, whatever those values are. It follows the easing, and staggered shapes get one strip each.
• Overlapping blocks: several attributes blocks can overlap on one shape. See Before and after the block.

On the board

An attributes block shows no indicator on the board. To see what it does, check the Attributes panel or the Timeline panel.

Attributes

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

Timing

• Time (Start and End): when the block starts and ends, in seconds.
• Duration: total time the block takes. Changing it keeps the start and end values, so the change happens faster or slower.
• Zero-length block: a block with the same start and end switches from its start values to its end values at that moment.

Animated attributes

• The list: one row for each attribute the block animates, with its Start and End values.
  • Remove a row: with one block selected, each row has a remove button. Removing a row puts that attribute back as it was before the block, on every shape. Removing the last row deletes the block.
  • Rows for some shapes: a row that applies to only some of the shapes ends with how many, such as 2 of 3 shapes.
  • Several blocks selected: the list shows the rows of all of them, and a row that only some blocks have ends with how many, such as 1 of 2 blocks.
• Add attributes, in the Actions panel, picks again for the block, with its attributes already picked.
  • Select a diamond to add a row or to remove one, then choose Accept.
  • Kept rows keep their values, removed rows go back to their values from before the block, and new rows start at each shape's current value.

Start and end values

• Type them in the rows: use the Start and End columns of each row. A value applies to every shape the row applies to.
• Or in the shape's inputs: at the block's start or end, the shape's own inputs in the Attributes panel also edit that value. Between the start and the end, and while the animation plays, those inputs are highlighted and read-only.
• The earliest start can change the base value: editing an attribute's earliest start can also change the value the shape returns to when no animation controls it, such as after the block is deleted.

Stagger and easing

• Stagger shapes: when a block animates several shapes, starts them one after another. See Stagger shapes.
• Reordering panel: with Stagger shapes on, sets the order in which the shapes start. See Stagger shapes.
• Easing: how the change speeds up and slows down. See Easing.

Before and after the block

• Before the first block: a shape shows that block's start value.
• After a block ends: the shape keeps its end value.
• Overlapping blocks: several attributes blocks can overlap on one shape, and each attribute follows one block at a time:
  • While several run, the one that started last sets the attribute.
  • When none runs, the one that finished last keeps its end value.
  • Before any of them starts, the first one shows its start value.
• With an Opacity or a Stroke Animation: on the same shape, the attributes block sets the values the other animation also controls only while it runs. Before, between, and after its blocks, the other animation shows its own value.
• Deleting a block: puts back the shapes' base values. Where another animation changes the same attribute, it takes over.

Actions

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

• Delete: removes the block. See Block actions.
• Cut, Copy, and Paste: move or copy the block to another time or sequence. See Cut, copy, and paste blocks.
• Reassign: changes which shapes the block animates. Shapes that stay keep their values, new shapes start at their current values, and removed shapes go back to their values from before the block. See Block actions.
• Create Block Pause: holds the values for a moment. See Block pauses.
• Add attributes: changes which attributes the block animates. See Animated attributes.