Scale Animation

Growing or shrinking shapes around a center.

A heart scaling around its center, with a faint outline showing its final size.

Scale animation makes shapes grow or shrink around a center over time. You can scale both axes by the same amount to keep the proportions, or adjust each axis separately to stretch or squeeze the shapes.

It works on any shape except cameras and texts on a path.

Scale or resize

  • Scale stretches or squeezes the whole shape like a picture: everything in it grows or shrinks together, stroke included.
  • Resize Animation gives shapes a new width and height instead, as dragging their handles in Creation mode would, so on a vector shape the stroke keeps its width. Texts change width and rewrap.

Creating it

Creating it.
  1. Select the shapes on the board.
  2. In Animation mode, choose Scale Animation in the Actions panel.

After it is created

After it is created.
  • It starts at the playhead and keeps the scale the shapes already have there, after any earlier scale blocks, so nothing changes until you set the end scale with a target handle or in the Attributes panel.
  • It is selected, and its scale indicator shows on the board.
  • With several shapes selected, one block scales all of them around a shared center.

The scale 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, scale blocks appear in emerald ().

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

The scale indicator on the board

The center handle, reference handles, and end-state handles on the X and Y axes.

The scale indicator shows the center and an axis for X and for Y, turned with the shape.

  • It shows while the block is selected, or for the selected shapes when Show all animation indicators is on.
  • A bar along each axis fills as the animation progresses.
  • Arrowheads show whether each axis grows or shrinks.

Handles

Set them up in this order:

  1. Center handle: the point the shapes grow from or shrink toward.
    • It starts at the shape's pivot, or at the middle point between the pivots of several shapes.
    • If the shapes already have an earlier scale block, it starts at that block's center.
    • Drag it to move the center.
    • It responds only while the playhead is at the block's start, and is grayed out at any other time.
  2. Reference handles: the rectangular handles on each axis. Each one marks a point on the shapes that the scaling carries to its target handle.
    • They start as far from the center as half the selection's width or height.
    • On shapes only a few pixels across on screen, they're drawn a little further out than the point they mark, so they stay easy to drag.
    • Drag them to measure from another point.
    • They respond only at the block's start. At other times they stay as gray markers.
  3. Target handles: the circles you drag to set the scale.
    • One on each axis, and one at their corner for both axes at once.
    • The shapes stretch or squeeze around the center so the point at each reference handle reaches its target handle.
    • They show at the block's start too, so you can set the final scale right after creating the block.

Maintain speed

Maintain speed in the Timeline panel header.

Maintain speed, in the Timeline panel header, decides what changing the final scale does to the block's duration, whether you drag a target handle or type the value in the Attributes panel:

  • Enabled: the duration follows the scale, so the scaling keeps the same speed and a bigger change takes longer.
  • Disabled: the duration stays the same.
    • A new block has no duration yet, so its scale changes at once, like a jump.

Attributes

Attributes.

The Scale Animation section of the Attributes panel.

Timing

Timing.
  • Time: when the scaling 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 scale speed (50 board units per second by default).
    • It measures how far the target handles travel, averaged over the two axes.
    • Changing it changes the block's duration.

Scale

Scale.
  • Scale X and Scale Y: with one block selected, two values per axis.
    • The first is the scale at the start, worked out from earlier blocks. It can't be edited.
    • The second is the scale at the end, where 1 is the original size. It goes from 0.001 to 1000 times the scale at the start.
    • With several blocks selected, each axis shows one value instead: the end scale relative to the start.
    • With Maintain speed enabled, the duration adjusts to the new scale, whether you type it or drag a target handle.

Center

Center.
  • Cx and Cy: the center's board coordinates at the start of the block, editable wherever the playhead is.
    • Cy follows the Y axis direction set in the board settings.

Stagger and easing

Stagger and easing.
  • Stagger shapes: when a block acts on multiple shapes, stagger offsets their start times sequentially. See Stagger shapes.
  • Reordering panel: with Stagger shapes on, sets the order in which the shapes start. See Stagger shapes.
  • Separate easings: gives each axis its own easing, Easing X and Easing Y.
    • Off, one Easing applies to both axes. Turning it off keeps the curve of Easing X.
    • Cubic in and out is the default. See Easing.

Actions

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

With a scale block selected, the Actions panel offers these block actions: