Timing

Keyframes, Hold and Finish

Each layer holds a pose per scene; keyframes decide when it lands and how.

This page covers how any layer moves between scenes: the keyframe that decides when a pose lands, the link that gives a layer a second pose, the Ease that shapes the journey, and the Finish settings (Hold and Perfect loop) that decide how the clip ends and repeats. It applies to media, gradient and vector layers alike, particles included. For the idea behind it in one picture, see how time works.

#Keyframes

Keyframes are automatic. There is nothing to add or switch on: every media, gradient and vector layer (the Background aside) has one pose on each scene and one keyframe that decides when that pose lands. Link the scene to another one and the layer travels between its two poses on its own. It animates the layer itself: its position, size and rotation. Particle movement inside the layer is a separate thing, handled by Motion.

You can see where a layer travels without opening anything. In the layer's row in the Layers list, hover the layer's type icon to see which scenes it travels between and the keyframe's percentage (on an iPad, tap it). Hovering the keyframe marker on a scene bar says the same. To change a pose on another scene, pick that scene in the scene list: the same layer stays selected, so you can move, scale or turn it there straight away.

The only choice left is the curve of the move, and that is the optional Ease component. Without it the move is Auto, a plain linear join.

The keyframe marker

Each layer has one keyframe per scene, shown as a thin line in the layer's colour on that scene's bar at the bottom of the screen. It starts in the middle, at 50%. Drag it anywhere from the start of the scene to the end to change when the pose lands; hover it to read "Keyframe at N%", and while the paused canvas sits off the middle its corner chip reads "KF @ N%". While the preview is paused, dragging the marker scrubs the preview, so you can see the pose arrive as you move it. Select a different layer and the bars show that layer's markers.

The keyframe is a percentage of its scene, not a time in seconds. Make a 1 second scene 3 seconds long and a keyframe at 50% stays at 50%, now at 1.5 seconds. That is true however the length changes: the Time field, dragging the boundary between two scene bars, or fitting a scene to a video. Hold is the one exception, covered below.

Scene length

The Time field in the bottom bar sets the scene length, from 0.1 to 30 seconds (new scenes are 3 seconds). Dragging the boundary between two scene bars retimes both while keeping their total the same. On a scene with a video the length is capped at the clip length, and the boundary drag is off.

#Ease

In the appCanvas > any layer > + Add Component > Ease
Shapes how the layer travels between its poses on linked scenes. Without this component the move is Auto, a plain linear join; remove it to go back to Auto.

Keyframes themselves are automatic: each layer has one pose per scene, and its keyframe marker decides when that pose lands: drag the marker on this scene's bottom bar to retime it. + Add Link under the scenes gives the layer a second pose to travel to.

Ease is per scene. Linked, this scene's Ease shapes the motion that happens ON this scene: after its keyframe until the cut, and after the previous cut until its keyframe. The last scene also settles from its keyframe to the end. On a particle Vector, Particle ease shapes how the particles' own values ramp across the scene. Perfect loop on a link uses the last scene's Ease to bring the particles back to the start of the chain so the wrap is seamless.

Ease shapes how a layer travels between two poses: whether it starts slowly, arrives gently, overshoots or bounces. It is an optional component: add it from + Add Component (it sits under Timing, last in the list) on any media, gradient or vector layer. Without it the move is Auto. Close the Ease card and the layer goes back to Auto; nothing else about its keyframes changes. A layer that already has a curve, from an older project, a recipe or the scene bar, shows its Ease card by itself.

Inside the card the curve menu stays dimmed until the layer has two different poses, because with nothing to travel there is nothing to shape, and a short note says how to make a move.

You can also set it from the scene bars: click a keyframe marker to see the eased range drawn over the bar, then click the dot above it to open the same menu. Picking a curve there adds the Ease card; picking Auto there takes it away again.

The options

Auto is the default: an unshaped, linear join. The other curves come in families:

  • Basic: Linear, Smooth, Ease in, Ease out, Dramatic, Slow start and Slow finish.
  • Sine, Quad, Quart, Quint and Circ in and out variants, from gentle to strong.
  • Expo in-out for a very fast middle.
  • Back curves overshoot slightly and come back.
  • Elastic curves spring past the pose and wobble into it.
  • Bounce curves land like a dropped ball.

Particle ease

On a particle Vector, the Ease card also has a Particle ease menu under the layer's own curve (labelled Layer ease there). It is a different curve for a different job: it shapes how the particles' own values change across the scene, when a Motion force, the Count or the Fill has a different value at the start and the end. It offers Default (physics cubic) and the Material 3 curves, and a saved curve that is not one of them shows as Custom curve and is kept. While nothing on the particles ramps it shows no effect. On linked scenes the first scene's Particle ease drives the chain.

It used to be the Easing menu of the Motion FX card, then part of the Keyframes card; it now lives in Ease, beside the other timing control. Closing Ease on a particle layer resets it to Default too.

Which scene's Ease applies

Each scene has its own Ease, and it shapes the motion that happens on that scene: from the previous cut to this scene's keyframe, and from the keyframe to the next cut. The last scene of a chain also settles from its keyframe to the end. So to change how a layer arrives on scene 2, set scene 2's Ease.

Tips

  • Ease out and Slow finish suit most arrivals: fast in, gentle landing.
  • Keep Elastic and Bounce for one element at a time. Several layers bouncing at once reads as noise.
  • Ease works with the keyframe position. A keyframe near the start of the scene with an Ease out gives a quick arrival and a long settle.

Ideas

  • A sale badge that drops in with Bounce out while the rest of the layout uses Ease out.
  • A product that overshoots its final size with Back out for a small "pop".
  • A slow, luxury push-in with Sine in-out across a 6 second scene.

#Finish

In the appCanvas > any layer > Finish
How the clip plays back. Hold adds time after the ease finishes. The field keeps moving. Perfect loop wraps the scene so the last frame matches the first. Animate gradient and particles both cycle. The extra hold time is part of that cycle.

Finish sits at the bottom of the canvas panel and applies to the whole scene, whatever kind of layer is selected. It has two settings, Hold and Perfect loop. When a particle layer is selected it also shows Preview at keyframe.

Preview at keyframe is on by default. It parks the paused canvas on this scene's keyframe, so you see the shape at its settled pose while you edit. It changes nothing in playback or export, and your choice is remembered in this browser rather than saved in the project.

#Hold

In the appCanvas > any layer > Finish > Hold
Adds time after the ease finishes. The hatched tail on the scene bar is this hold. Particles keep moving. Perfect loop stays available and uses the extra time.

Hold adds time to the end of the scene after the animation has finished. The keyframes and Ease play out as before, then the layout stays in its final pose for the extra time while particles keep moving. That gives the viewer time to read the offer without the last frame freezing.

  • The slider runs from 0 to 10 seconds in steps of 0.1, and starts at 0. Click the number to type up to 20 seconds; the scene as a whole can be at most 30 seconds.
  • Raising Hold makes the scene longer. The animation window before it is unchanged, so every keyframe keeps its time in seconds. This is the one length change that does not keep keyframes at their percentage.
  • The hold shows as a hatched tail on the scene's bar, and the keyframe marker cannot be dragged into it.
  • The Time field includes the hold. If you shorten the scene below the hold, the hold is shortened to fit.
  • String expressions finish at the end of the animation and hold their final value through the Hold.

Worked example

A 6 second 1:1 ad: 4 seconds of movement, then 2 seconds to read the price.

  1. Build the move on a 4 second scene.
  2. Set Hold to 2. The scene becomes 6 seconds and the move still takes the first 4.
  3. With a particle layer, the field keeps drifting through those 2 seconds, so the ad does not look paused.

#Perfect loop

Perfect loop ∞ is an on and off switch in Finish. It makes the scene wrap so the last frame matches the first, which is what you want for any placement that repeats: stories, in-feed video and display banners. It is off by default.

  • Particles and animated gradients both cycle, and the Hold time is part of the loop.
  • On particles, Gravity and Spring are switched off while it is on, because a fall or a spring cannot return to where it started. Forces that cannot loop are marked ∞ off, and the one-shot Bounce motion does not repeat.
  • On a linked chain, switching it on or off does so for every scene in the chain. After the last scene's Hold, that scene's Ease carries the particles, pose and shape back to the first scene, so the wrap is a smooth move rather than a jump.
  • It is not the same as the loop button in the playback controls, which only changes how the preview plays.

The loop button

The button beside Play sets how the preview plays. Each click steps to the next mode, and hovering it names the one it is in (on an iPad, each tap names the mode it moves to):

  • Off (the default for new projects) plays the timeline once and stops.
  • Normal timeline plays the whole timeline and starts again.
  • Active scene repeats the scene you are on.
  • Ping pong timeline plays the timeline forwards, then backwards, and repeats.
  • Ping pong active scene does the same for the scene you are on.

After Ping pong active scene the button goes back to Off. With Off, a scene set to Perfect loop still loops, because it is made to. The project remembers the mode. The loop button only changes the preview: how many times a video repeats is Export loops.

Tips

  • For a clean loop, keep the first and last pose close, or let the last scene's Ease do the return with a gentle curve such as Sine in-out.
  • Check the loop by setting the loop button to Active scene and watching the join.

Ideas

  • A display banner where a lattice ripples forever behind a fixed headline.
  • A three-scene story (lattice, logo, price) that flows back into the lattice so it can repeat.
  • A gradient background that cycles its brand colours in a seamless loop behind a product shot.

Try it in Wildfield

Build an animated, on-brand ad in every format from one project.

Wildfield is coming soon and opening to new teams in waves.

Start freeJoin the waitlist