Animate a design and add touch scenes

Animation makes a design move on the screen. In the Creative Canvas editor you give each layer an entrance and an exit, then place every layer on a timeline. Scenes add more screenfuls to the same design, and a viewer on a touch screen taps a layer to move between them. Build the design first — see design a sign.

What you can do

• Quick presets — One choice re-choreographs every layer in the design.
• Per-layer tuning — Give one layer its own entrance, exit, duration and delay.
• A timeline — Drag a layer's bar to set when the layer starts and how long the layer runs.
• Frame inspection — Park the playhead to freeze the canvas at one moment.
• A light sweep — Add a warm band that travels over the design on load.
• Touch scenes — Add more scenes so that a tap moves the viewer between them.

Choreograph the whole design in one step

1. Open the design in the Creative Canvas editor.
2. Select the Animation tab in the right rail.
3. Pick a preset under Quick presets: Cascade, Promo pop, Spotlight or None.
4. Select Replay on the timeline dock handle to watch the design play on the canvas.

Fine-tune one layer

1. Select a layer on the canvas, or in the Layers panel.
2. Open the Animation tab.
3. Pick a tile under Enter.
4. Read the caption under the grid, which explains what the effect does.
5. Type a duration in milliseconds.
6. Type a delay in milliseconds.
7. If the layer must animate out, pick an Exit effect the same way.

Sequence the layers on the timeline

1. Select the Timeline tab on the dock handle at the bottom of the canvas.
2. Drag a layer's bar sideways to change when the layer starts.
3. Drag the right edge of a bar to change how long the layer runs.
4. Press the play button on a track to preview that layer alone.
5. Select Stagger to cascade every layer 110 milliseconds apart, in track order.

Inspect a single frame

1. Drag along the ruler above the tracks to park the playhead.
2. Watch the canvas, which freezes at that moment.
3. Press the left and right arrow keys on the ruler for finer steps.
4. Press Escape to release the playhead.
5. Select the resume chip to start playback again.

Copy an animation between layers

1. Select the copy button on the track you want to reuse.
2. Select the paste button on each track that must match.
3. Check the effect name on the bar of every track you pasted onto.

Add a light sweep

1. Open the Animation tab.
2. Select Add a light sweep.
3. Drag the new layer over the part of the design the band must cross.
4. Set the duration and the delay of the new layer on the timeline.

Add a second scene

1. Select the Scenes tab on the dock handle at the bottom of the canvas.
2. Select + Add a touch scene while the design has one scene only.
3. Or select + Scene when the Scenes strip already shows.
4. Build the new scene on the canvas — each scene holds its own layers.

Make a layer jump to another scene

1. Select the layer that people will tap.
2. Open the Box tab.
3. Set On tap (touch screens) to Go to scene.
4. Pick the destination from the Scene list.
5. Look for the small amber SCENE badge, which marks the layer as touch-active.

Choose how a scene arrives

1. Open the Scenes strip.
2. Find the chip for the scene.
3. Set the transition list on the chip to None or Fade.
4. Select each chip in turn to check the result.

Rename or remove a scene

1. Hover a scene chip.
2. Select the pencil to rename the scene.
3. Press Enter to keep the new name.
4. Select the cross on the chip to delete the scene.
5. Confirm the deletion in the dialog.

What a screen shows

Preview and the player render the Main scene first. A viewer reaches the other scenes only by a tap on a layer that navigates to them. Save the design, then add the design to a playlist to put the motion on a screen.