Entrance Animations

Entrance animations reveal an element the first time it scrolls into view — it starts hidden,
then fades, slides, flips, or zooms into place. They're a per-element setting: any element on
the page can have its own entrance animation, timing, and easing.

Applying an entrance animation

1. Select the element you want to animate.
2. In the properties panel, click the play icon to open the Animations tab.
3. Expand the Entrance Animation section.
4. Choose an Animation Type. The element will animate the next time it enters the
   viewport on the live site.

The Animations tab also contains Scrolling Animation and Sticky — those are separate
features. Entrance Animation only concerns how the element first appears.

Animation types

Type	What it does
Fade	Fades in from invisible.
Slide Up / Down / Left / Right	Fades in while moving from the given direction. The travel distance is configurable (see Distance).
Flip Up / Down / Left / Right	Fades in while rotating in 3D — Up/Down rotate around the horizontal axis, Left/Right around the vertical axis.
Zoom In	Fades in while scaling up from 60% size.
Zoom Out	Fades in while scaling down from 120% size.

Every type includes a fade — a sliding or zooming element is also fading in as it moves.

To remove an animation, clear the Animation Type. There is no separate on/off switch — an
element with no Animation Type has no entrance animation.

Duration and Delay

• Duration — how long the animation plays. Default 500ms, adjustable from 0 to
  3000ms.
• Delay — wait time after the element is triggered before the animation starts.
  Default 0. Useful for sequencing: give sibling elements increasing delays (e.g. 0ms,
  150ms, 300ms) to create a staggered reveal.

Advanced options

Click the edit icon next to Advanced to open the remaining options.

• Distance — how far the element travels (Slide) or rotates (Flip). Only shown for
  Slide and Flip types. Default 100px; for Flips the value acts as the rotation amount.
• Offset — how far past the bottom of the viewport the element must scroll before the
  animation triggers, in pixels. With the default value, the animation starts once the
  element is about 120px inside the viewport, so it's actually visible when it plays.
  Larger values make the element travel further into the viewport before animating.
• Animate only once — by default, an element animates again if it leaves the viewport
  (by scrolling back up above it) and re-enters. Turn this on to play the animation a single
  time per page load.
• Ease — the acceleration curve of the animation. Default Power1 Out (starts fast,
  settles gently). Options range from Linear through progressively stronger Power1–4
  and Expo curves to the personality eases — Back (overshoots and returns),
  Elastic (springs), and Bounce — each available in In, Out, and InOut variants.
  Out variants are usually right for entrances: they start fast while the element is still
  invisible and decelerate as it lands.
• Disable At — turn the animation off at a breakpoint. Because breakpoints cascade
  downward, the animation is disabled at the chosen breakpoint and everything below it.
  Choose Tablet Portrait and the animation runs only on Desktop and Tablet Landscape;
  choose Desktop and it never runs. Elements with a disabled animation display normally —
  they're simply visible without animating.

Entrance animation settings are one value per element — apart from Disable At, they can't
be configured differently per breakpoint.

How it behaves on the live site

• The element is hidden by CSS until its animation triggers, then animates in as soon as the
  trigger point crosses the bottom edge of the viewport. Elements already in view when the
  page loads animate immediately.
• In the builder canvas, animated elements stay visible so you can keep working on them.
  Use the builder's preview mode to watch animations play.
• If a visitor's operating system has reduced motion enabled, animations are skipped
  entirely — content renders visible and static. This is automatic and requires no
  configuration (and it's a common explanation for "it doesn't animate on my machine").
• Inside loops (Post Loop Builder, Repeater Field, Term Loop), each rendered item
  animates independently — including new items added by AJAX pagination or load-more.
• Elements inside popups, tabs, accordions, and sliders play their entrance animations
  when their container is opened or becomes active, not on page scroll.

Tips