Skip to main content

Scroll Position

The Scroll Position trigger lets you craft a custom animation by defining a Start and End state and scrubbing smoothly between them based on the element's current scroll position.

Adding a Scroll Position animation​

  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 Position as the trigger type
  5. Add the properties you want to animate and configure their Start/End values

Animation Properties​

Click Add Animation Property to add a property to the timeline. Add as many as you like — each is configured individually and the block scrubs from its Start value to its End value as the visitor scrolls. New properties are seeded with sensible ending values, so you can often create an effect just by setting the Start.

Available properties are grouped as:

  • Transforms — Translate, Scale, Rotate, Skew, Perspective
  • Width, Height, Opacity, Box Shadow
  • Color (text) and Background Color
  • Filters — Blur, Brightness, Contrast, Grayscale, Hue Rotate, Invert, Saturation, Sepia, Drop Shadow
  • Masks — Inset and Circle reveals

Animation Boundaries​

The Animation Boundaries define when the scrub starts and ends. Each boundary is a pair of positions — a point on the Element meeting a point on the Viewport (each can be Top, Center or Bottom):

  • Begin Animations (start) — when the element position meets the viewport position, the animation begins. For example, Element: Top / Viewport: Bottom starts the animation the instant the element first enters from the bottom of the screen.
  • End — when the element position meets the viewport position, the animation is complete.

Each boundary also accepts an Offset to fine-tune the trigger point, and convenient presets (In View, View Center, Fully Visible, etc.) are available for common setups.

Scroll Pinning (Advanced)​

Scroll Pinning sticks the block in place once it's reached and holds it there until the animation completes — great for storytelling and reveal effects ✨

Enable Pin While Animating in the Animation Boundaries section. Then control the pin with:

  • End After Scrolling — how far the visitor scrolls to complete the animation, measured in viewport heights (e.g. 200% = two screens of scrolling).
  • Pin On — start pinning when the row is In View or only On Pin (once it reaches the pin point).
  • Row Animation End — whether a property's animation ends with the Entrance or extends to the Pin Offset.
  • Stagger Children — offset the animation of pinned child blocks for a cascading effect.
Note

Pin While Animating is only available on root-level blocks. Child blocks of a pinned block are pinned too and inherit the parent's boundaries (their own boundary controls are disabled).

Per-Property Timing​

By default every property animates across the full scroll range. Open a property's Timeline to give it its own timing:

  • Offset (0–100) — where within the scroll range the property begins animating.
  • Duration (1–100) — the percentage of the scroll range the property's animation occupies.

Cascading the offsets and durations of different properties lets you sequence a complex, multi-step animation from a single scroll.

Easing & Playback​

By default a Scroll Position animation is tied linearly to the scroll bar. Shape that motion with an Easing curve — choose a cubic-bézier preset (Sine, Cubic, Quint, Circular and more) or design your own in the built-in cubic-bézier editor, or pick a Spring easing (Gentle, Wobbly, Stiff) for natural, bouncy motion. Enable Smooth playback to ease the scrubbing for a more fluid feel. Use Preview Starting State to see the Start values applied on the canvas while you edit.

Animating Colors​

Among the properties you can animate are Color (text) and Background Color. Set a starting and ending color — from your Global Colors or a custom value — and the block transitions between them as the visitor scrolls.

Color animation is available on blocks that support the corresponding color:

  • Text color — Text, Button, Icon, Row, Column, Flex Box, Scrolling Marquee and World Time.
  • Background color — Text, Button, Icon, Row, Column and Flex Box.