Drags, scrolls and hand-offs

A prototype feels real when things follow your finger and screens flow into each other. Three pieces do it, all in the Interactions section of the prototype panel.

Scrub a timeline with a drag

Any frame's timeline (the one you key in Animate) can be driven by a drag instead of the clock.

1. Key what should move on the frame's timeline: a carousel sliding card by card, a player's progress bar, a row rising to the top of a list. Put a marker at each place it should be able to rest.
2. Select the layer you'll drag, add an interaction, set the trigger to On drag and the action to Control timeline › Scrub.
3. Pick the axis, and the distance: how far a drag goes to cover the whole span. Leave it at 0 and it is the layer's own width (or height). A negative distance reverses it — dragging left moves the timeline on, the way a carousel moves.
4. Choose what happens when you let go: stay where it is, settle on a marker (a flick carries it on to the next one), or play on from there (a song's scrubber).
5. From and To limit it to a span of the timeline, so the frame's entrance animation before it isn't scrubbed too. Add a pause marker at the start of the span so the timeline waits there.

A two-finger swipe on a trackpad drags a scrub the same way.

This component instead of Frame timeline drives the timeline of the motion component the layer belongs to, on its own clock — a volume slider whose knob is keyed from silent to full, scrubbed on its own while the frame's timeline keeps playing. An instance rests at the start of its playback range until it is dragged.

1. 1.Present the screen0:00
2. 2.Drag: it follows, and settles on the next card0:01

Description

An onboarding carousel presented. Its cards are a timeline with a marker at each card, driven by On drag › Control timeline › Scrub. Dragging left moves to the next card and letting go settles on a marker; a flick carries on to the next.

Scrub with a scroll

Set a frame to scroll (Scrolling in the prototype panel), then give it an interaction with While scrolling › Control timeline › Scrub, axis vertical. The scroll offset maps onto the span: scroll distance px and the whole span has played — a header that folds away as the list scrolls up.

Play, pause and seek from a click

Control timeline on a click can Play, Pause, Play / pause (toggle) or Seek — glide to a time, or to the next or previous marker. A seek keeps the timeline as it was: a playing song skips to the next section and keeps playing; a carousel waiting on a card glides to the next one and waits there.

Pair it with a variant change on the same click: a play button whose Change to morphs it into its pause state, and whose Control timeline pauses the song.

Hand layers over between screens

• Shared element. Give a layer a key in the Shared element section (say cover), and the same key to the layer it becomes on the next screen. Smart animate hands one to the other wherever each sits — a mini player's cover unfolds into the full-screen player's. When several layers on a screen share a key, the one you tapped (or, going back, the one you came from) is the one handed over.
• Stagger. On a smart animate transition, Stagger hands the destination's top-level layers over one after another, that many milliseconds apart, within the same duration: the backdrop moves first, then the cards, then the words.
• Scale. Smart animate glides scale too, so a world drawn bigger and moved on the next screen is a camera flying into it. Put each layer of scenery at its own scale for parallax.
• From this layer. Circle wipe, iris and zoom through can grow from the layer you tapped, and Back closes back onto it.
• Back plays each hand-off in reverse and returns to the screen as you left it: a carousel dragged to its third card is still on it.

While a smart animate plays, the screen you're leaving stays where it was and the one arriving is shown where its timeline starts, so its entrance animations begin after the hand-off, not before.

See it working

The Music app templates (Orbit, Undertow, Nightline and Grove) use all of it: a map of genre zones you drag and flick between, a player whose scrubber, volume and play button drive timelines, a queue you reorder by dragging, a search header that folds as you scroll, and one cover handed from screen to screen.