Go to platform

Entrance animation

Give any element an entrance: a fade, slide, or scale that plays when a visitor first sees it. It's a light-touch way to draw attention to the thing your variation changed: a new banner, a moved CTA, a testimonial block.

You'll find it in the Inspector's Entrance animation section when an element is selected. One line sums up the behaviour: plays when a visitor first sees this element.

Choosing an animation

Pick one of the preset cards (None, Fade, Slide, or Scale), then tune it:

  • Duration and Delay in milliseconds.
  • Easing: the acceleration curve of the movement.

The canvas replays the animation the moment you apply or change anything, so you always see the effect of what you just did. Re-clicking the already-active preset replays it too: click Fade twice and you watch the fade twice. There's also an explicit ▶ Preview button to replay on demand, as many times as you like. Nothing about previewing touches your staged change; it just re-fires the animation.

When it plays

The Play control decides the trigger:

  • On scroll into view: the default for new animations. The animation waits until the element actually enters the visitor's viewport, then plays once. This is what you want for anything below the fold: without it, the animation would finish while the element is still off-screen and the visitor would never see it.
  • On page load: plays as soon as the page loads and the variation applies. Right for above-the-fold elements that are visible immediately.
Scroll-triggered elements are never left hidden

The scroll trigger is fail-open by design. If the animation can't run for any reason, the element simply shows in its final state: a visitor can never be left staring at a permanently invisible element.

Reduced motion

Entrance animations respect the visitor's system Reduce Motion setting automatically: the generated CSS only runs for visitors who haven't opted out. Visitors with Reduce Motion enabled see no animation at all; the element just appears in place.

The same is true for you in the editor: if your own system has Reduce Motion switched on, the preview is suppressed, and the section tells you why instead of looking broken: "Your system's Reduce Motion is hiding this preview, visitors without it will still see the animation."

Requirements and delivery

  • The element needs a CSS-addressable selector. If the editor could only match the element by its visible text, the section explains that an entrance animation isn't available for it: see selectors for how to give the element a stable hook.
  • The animation ships to visitors as real CSS keyframes scoped to the element's selector, alongside your other changes. It coexists with any per-element custom CSS you've written: neither overwrites the other.
  • Editing toolkit: the rest of the Inspector's per-element controls.
  • Custom code: for animations beyond an entrance (looping, hover-driven, multi-step), write variation CSS or JavaScript.
  • Preview links: let a stakeholder experience the animation as a visitor would.
Was this helpful?