Skip to main content

Scroll Into View

The Scroll Into View trigger plays a preset animation once, when the element is scrolled into view, and then leaves it in place. It's the simplest trigger type — perfect for quickly adding common entrance animations. To build your own custom scrubbed animation instead, see the Scroll Position type.

How to use​

  1. Select the Nectar block you want to animate
  2. Open the Block Settings panel and scroll to "Block Animation"
  3. Click Add Animation Trigger
  4. Choose Scroll Into View as the trigger type
  5. Pick an animation Type and configure its settings

Click Preview Animation to play it right on the editor canvas.

Animation Types​

Choose a Type, then refine it with the options that apply to it:

  • Slide — slide in from a direction. Set From (Left, Right, Up, Down) and a Distance (how far it travels).
  • Fade — fade in or out.
  • Grow / Shrink — scale up or down into place.
  • Rotate — rotate into place.
  • Flip — flip in from a direction (From).
  • Reveal — uncover the element with a clip-path wipe. Choose a Mode (Directional or Inset), optionally Fade In, and set Inset and Roundness amounts.

Most types share a From / To (play direction — animate in or out), a Duration, a Delay, and an Easing curve (presets or a custom cubic-bézier; see Easing).

Staggering Child Elements​

By default the animation applies to the block itself. Under Target, switch to Children to instead animate the block's direct children, and set a Stagger delay to offset each child's start — an easy way to cascade a grid of cards, list items, or columns into view. (Children targeting is scoped to the Scroll Into View trigger and does not affect any Scroll Position or Interaction triggers on the same block.)

Trigger On

Use Trigger On to choose which devices (desktop / tablet / mobile) the animation runs on.