Motion on the canvas

You do not have to open Preview to see your motion. With the Prototype tab open, the canvas enters motion mode for the selected frame: every layer that moves is marked, a scroll bar beside the frame scrolls the page in place, and appears and effects can be played right where they are.

Motion here is the page’s own motion: Appear on scroll, While scrolling, loops, pins and effects. Links between screens are interactions and play in Preview.

Open motion mode

Any of these opens it:

• A frame with motion says so on its name bar: Motion 3 means three layers move. Press it.
• Select a moving layer: a small motion button appears beside the selection. Press it to open its motion in the Prototype tab.
• Or simply select the frame and open the Prototype tab (⌥9).

To leave, press Exit motion on the frame’s bar, or the Exit motion button above the toolbar at the bottom of the canvas. Both take you back to the Design tab.

See what moves

In motion mode, each moving layer has a dashed outline and a chip naming its motion: Appear, Parallax, While scrolling, Pin, Loop, Hover, Click and so on. Click a chip to select the layer and open that motion. Effects get a chip of their own. Very small layers keep the outline without a chip.

The Prototype tab also lists Motion on this frame when the frame is selected: every moving layer and what it does.

Scrub the scroll

A scroll bar runs beside the frame. Drag it and the page scrolls on the canvas, with every While scrolling layer and every pin moving as it would in Preview.

• Knots on the bar mark where each motion starts. Point at one to see which layers.
• Each motion section in the panel says where you are: “At 640px”, then “42% through”, “Starts in 120px”, “Held 120 of 400px”, “Played” or “Finished”.
• Double-click the bar, or press Esc, to see the design at rest again.

Play an appear

Select a layer with Appear on scroll. Its section has a timeline with a Play button: the canvas scrolls to where it starts and plays it. A dashed screen on the canvas shows the moment it plays; drag it up to start it sooner or down to start it later.

Play an effect

Layers with an effect show the effect’s first frame on the canvas, as the page opens. Select one and press the play button at the top right of the selection to watch it move; press its chip to stop it. See The Effects library.

Drag the edges of a marquee

On a layer with a marquee loop, bands at both ends of the frame that clips it set how far the edges fade. Drag a band deeper or shallower.

Catches

• Text looks and reveals show whole on the scroll bar. Light up words, Slices, letters and words, and the reveals from a corner or the centre move the whole layer on the canvas; they play in full in Preview and on your site.
• A frame no taller than the screen will not scroll. The panel says so (“This frame fits on a 844px screen…”) and the scroll bar has nowhere to go. Make the frame taller.
• A layer below the end of the page never appears. The canvas warns you and offers Fit height.
• Loops and hover interactions show at rest on the canvas; they play in Preview and on your site. Hover effects such as Letter roll play from the selection’s play button.
• Several layers selected show their shared effects only. Motion is set one layer at a time.

Motion mode is on every plan.