Animation

Two ways to move things, for two different jobs.

Motion presets

The quick one: pick an element, open Animate in the prototype panel (or + on the timeline) and choose a preset. Hover a tile to see it play.

• Entrance: Fade in, Rise, Drop, Pop, Scale in, Slide in (from any side), Wipe (frames), Blur in.
• Exit: the same, leaving.
• Emphasis: Pulse, Shake, Bounce, Wobble, Flash.
• Camera (on a group or frame): Push in, Pull out, Dolly, Drift, Zoom through, Truck, Crane, Pan, Orbit.
• Text: Typewriter, and letters, words or lines in and out.

Duration, delay, curve (with the overshoot of the back curves), distance, direction and amount stay editable after you apply one — change them and the preset updates. Select several layers and they stagger: in layer order, selection order, reverse, from the centre or at random.

A preset is ordinary keyframes on the timeline, so you can edit it like any other. Wait for a click when presenting puts it behind a pause marker: the show stops there until you click, which is how you reveal a list one row at a time.

The keyframe timeline

The precise one. Switch to Animate in the top bar and a timeline opens along the bottom: key any property, shape the curves in the graph editor, add behaviours, animate text by letter, word or line, build 3D scenes, sequence frames into compositions with transitions and sound, and export video. It has its own section: Animating.

Smart animate

1. 1.Select the first screen and click Present0:00
2. 2.Click: the layers glide to the next screen0:01

Description

An onboarding prototype. Present plays it from its first screen; a click on the button goes to the next screen with Smart animate: layers with the same name glide to their new places instead of cutting.

The third option, and often the right one: don't animate anything, and let Smart animate tween between two frames by matching layer names. Draw the before and the after; PopCraft works out the motion.

Getting it out

Animation exports as MP4, WebM, GIF, a PNG sequence or Lottie (Exporting). Builds and smart animate in present mode are in Presenting and the web. A pixel canvas has its own frame timeline and exports as a GIF or a sprite sheet.