Presenting and the web

Everything you animate plays when you present: a slide's timeline runs as the slide opens, and pause markers make it wait for you, so a list arrives a point at a time.

1. 1.Markers along the ruler: amber ones are pauses0:00
2. 2.Double-click one: Pause here when presenting makes it a stop0:00
3. 3.Press M to add your own marker at the playhead0:02
4. 4.Present, then → to the slide: it plays to each pause and waits0:04

Description

A pitch deck slide in Animate whose three points arrive one after another. Its markers sit along the ruler, the amber ones pauses; double-clicking one shows its editor with Pause here when presenting on, and M adds another at the playhead. In present mode, the arrow key moves to the slide and then plays it on to its next stop each time, a point at a time.

How to

Build a slide one point at a time

1. Animate the points in, one after another: select them, + → Rise, with a Stagger (see Presets and stagger).
2. Put the playhead just after the first point lands and press M to drop a marker.
3. Double-click the marker and turn on Pause here when presenting. It turns amber. Add one after each point.
4. Click Present (or press Ctrl+Alt+Enter). The slide plays to its first pause and waits. Each click or → plays on to the next pause. A click in the middle of a stretch finishes it at once. Once the last pause has played, the next click moves to the next slide.

Let a slide or a scene move on by itself

Each slide says how the show moves on from it: select the slide and, in the Design panel, set Advance to On click (it waits at each build and at the end; the default for decks), When animation ends (its builds play straight through, then the next slide) or After a delay (that many seconds after its animation ends). Loop the show starts again from the first slide after the last, for a kiosk.

A composition presents as one piece: its scenes in order, with their transitions and sound. Each scene carries on into the next by default; pick a scene in the strip and set Then to wait for a click or hold a few seconds at its end. Loop in Present starts the composition over when it finishes. Next and Previous jump a scene, and K pauses.

A preset applied with Wait for a click when presenting (in the prototype panel's Animate section) puts a pause before itself for you.

Make a card grow into a detail view (smart animate)

1. Draw the card on one frame and the detail view on another. Give the layers that should travel the same names in both.
2. In Prototype, connect the card to the detail frame. A new connection defaults to On click → Navigate with Smart animate, 300 ms, ease in and out.
3. Present and click the card. Layers matched by name glide between the frames (position, size, rotation, opacity, corner radius and fill colour); layers without a match fade in or out.

The same smart animate plays when a motion component instance changes variant.

Put motion on an exported web page

Motion components carry over to Export as web code… (see Code and web). Each instance's timeline becomes CSS keyframes: its start becomes a delay, its speed the duration, its loop the iteration count (ping-pong alternates) and its hold the fill mode. An instance set to play on Click, Hover or In view gets a small script that starts it; In view starts when a quarter of it has scrolled on screen. A frame's own timeline stays still on the web, so wrap motion that should play on a page in a motion component.

Reference

See Presenting for slides, speaker notes and the presenter view.