Create Motion with Block Animations

In this course, we’re going to explore the animation system in Nectarblocks.
Animations bring motion and energy to your designs, and Nectarblocks gives you a few powerful ways to make it happen:

We’ll begin with the Scroll into View animation trigger, then move on to animations linked directly to scroll position. The Scroll into View trigger is the fastest way to bring motion into your page. When applied, the animation plays once as the element enters the viewport.

1. Select the block you want to animate.
2. In the Block Settings panel, Go to the motion/fx tab.
3. Click Add Animation Trigger.
4. Choose Scroll Into View as the trigger type.
5. Pick a preset animation and adjust the settings.

You can preview the effect directly in the editor by clicking Preview Animation.

Some blocks also include entrance-specific effects. For example, the Text block lets you animate individual characters or words, adding extra impact to your typography.

Entrance animations are perfect for quick effects. If you want something that evolves as the user scrolls—rather than a one-time effect—you’ll want to use Scroll Position animations.

Part 2: Scroll Position Animations

Scroll Position animations give you full control over how an element changes as the user scrolls. Instead of playing once, you define a Start state and an End state, and Nectarblocks animates smoothly between them based on the element’s position in the viewport.

How to set it up:

1. Select the block you want to animate.
2. In the Block Settings panel, scroll down to Animations.
3. Click Add Animation Trigger.
4. Choose Scroll Position as the trigger type.

Now you’ll see options for configuring your animation.

Adding properties
Click Add Animation Property to set what should animate. For example: opacity, scale, or transforms. You can add multiple properties, each with their own start and end values. By default, common ending values are pre-filled, so you can usually just set the starting values to get going.

Animation Boundaries

Animation boundaries control the exact point in the scroll where your animation begins and ends. Think of them as markers that define the “play zone” for your animation.

Start On options:

• Block Enter – The animation begins the moment the block enters the viewport.
• View Center – The animation begins when the block aligns with the center of the viewport.
• Fully Visible – The animation begins only once the entire block is visible.

End On options:

• View Center – The animation finishes when the block reaches the center of the viewport.
• Block Exit – The animation finishes as soon as the block leaves the viewport.
• Out of View – The animation continues until the block is completely out of view.

By combining these, you can fine-tune exactly how much of the scroll range the animation uses.

Scroll Pinning

Scroll Pinning is one of the most advanced animation features in Nectarblocks. When enabled, the block “sticks” in place while the user scrolls, and the animation plays out across that pinned duration. This is ideal for storytelling or step-based animations.

Pinning can only be applied to root-level Row blocks. Any child blocks inside that pinned parent will automatically be pinned as well, and their animation boundaries will be disabled. This is because the children inherit the boundaries of the parent block and follow the same animation rules to stay perfectly in sync with the timeline. You can add as many child blocks with Scroll Position animations as you want inside the pinned Row — they’ll all play together based on the scroll settings defined for the parent.

Here’s a breakdown of the options you’ll see when Pin is enabled:

• Pin – Activates pinning for the selected block.
• Begin Animations – Decide whether animations begin as soon as the block comes into view (In View), or only when the pin starts (On Pin).
• Stagger Children – Staggers animations for child elements within the pinned block.
• Pin On – Choose when pinning begins: when the block reaches the View Center or when it’s Fully Visible.
• End After Scrolling – Defines how long the block stays pinned, measured in multiples of the viewport height. For example, 200% equals two viewport heights of scroll.
• Smooth – Adds easing for a more natural scroll scrubbing effect.
• Trigger On – Control which devices activate pinning: desktop, tablet, or mobile.

Previewing Scroll Animations

One important note: scroll position animations don’t run directly inside the editor. This keeps the editing experience smooth and manageable. Instead, you’ll see a Preview Animation button in the panel. Clicking this launches an instance of the animation, so you can test exactly how it looks and behaves in the browser.

Template Library: Scroll Sections

To help you get started quickly, the Template Library includes a dedicated category called Scroll Sections. These are pre-built layouts that already use scroll position animations and pinning. You can drop them into your page, see how they’re built, and customize them for your own design. This is a great way to learn by example, and to speed up building more advanced effects.

Example: Building a Scroll-Pinned Animation

If you’ve looked at the Nectarblocks demos, you’ve probably noticed some complex-looking scroll animations — the kind that might seem like they’d take hours of coding. The reality is, every one of them is built right inside Nectarblocks using the animation system. Let’s walk through a popular example together.

In this animation, an image reveals outward from a mask, while two text blocks slide in from opposite sides and meet in the center. It looks advanced, but it’s surprisingly straightforward once you break it down.

Step 1: Set up the structure
We start with a parent Row. Inside it, there are two main pieces:

• A dedicated background layer that holds the image.
• A child Row with two columns, each containing a Text block.

The reason we use a dedicated layer for the background is simple: we want full control over it. Instead of applying the background directly to the parent Row, we create a layer Row, position it absolute, and stretch it edge to edge with top, left, bottom, and right set to zero. Then we add the background image. Visually, it looks identical to a standard background, but now it’s its own element — ready for custom animation.

Step 2: Animate the background reveal
On the background layer, we add a Scroll Position animation.

• For the starting state, we apply an inset of 18 viewport width units, effectively clipping the image inward.
• For the ending state, we animate that inset back to zero, revealing the image fully.

When setting up starting states like this, it helps to use the Preview Starting State option. That way you can see exactly what values you’re working with in the editor.

Step 3: Animate the text blocks
For the left Text block:

• We add a Scroll Position animation.
• The starting state is a translateX offset of -50%, moving it just off the left side of the page.
• Using Preview confirms that it’s fully hidden off-screen.

For the right Text block:

• Same idea, but the offset is +50% on the X-axis, pushing it off the right side.
• Again, Preview shows it correctly hidden before animating in.

Step 4: Add the pinning
If we preview the page now, the animations technically work, but they play out as you scroll past the section. What we want is to pause the scroll, play the animation timeline in place, and then continue scrolling afterward.

To do that, we select the parent Row and enable Pin under Scroll Position. Now all the child animations are synced to that pinned timeline.

Here we’ve set End After Scrolling to 150%. That means it takes one and a half times the height of the viewport for the animation to play out. When we preview again, the page locks at this section, runs the animation, and then releases back to normal scrolling.

Step 5: Experiment with effects
The best part is you’re not limited to just insets and translations. For example, on the background layer, we could add a starting rotation alongside the inset. Previewing shows the image not only reveals outward but also rotates into place.

This flexibility comes from the fact that most CSS properties are supported as animation properties. Which means your imagination is really the only limit to what you can create