Animation System

Overview

Nectarblocks has a robust system for triggering animations on your elements. You can quickly add common preset animations, or build your own complex, multi-property animations through an intuitive interface — all rendered on the front end by a single, consolidated GSAP bundle for smooth, performant playback.

Video Tutorial

The Animation System

When editing any Nectar block that supports the Animation block control, you'll find the settings in the sidebar under the "Block Animation" section.

Click the Add Animation Trigger button to add a trigger. Each block can hold one trigger of each type, and you can combine them — for example, a Scroll Into View entrance plus an Interaction hover effect on the same block. Once a trigger is added, its settings slide in.

Trigger Types

1. Scroll Into View — play a preset animation (Slide, Fade, Grow, Reveal and more) once, when the element scrolls into view. The simplest way to add a polished entrance, with optional staggering of child elements.
2. Scroll Position — scrub a custom animation between a Start and End state based on the element's scroll position. Supports pinning, per-property timing, and color animation.
3. Interaction — animate a block on hover/focus, targeting the block itself or another block on the page.

What's new in the Animation System

• Per-property timing — for Scroll Position and Interaction animations, each property has its own Offset (when it starts) and Duration (how much of the timeline it occupies), shown in a timeline view, so properties can cascade rather than all moving at once.

• Spring physics — alongside cubic-bézier easing, choose a Spring easing (Gentle, Wobbly, Stiff) with optional custom tension/friction/mass for natural, bouncy motion.

• 3D & perspective — the Transform control adds translateZ, 3D rotation, a Perspective value and a Transform Origin, with preserve-3d applied automatically so nested 3D transforms compose correctly.

• Color animation — animate Text Color and Background Color between two values.

• Editor previews — preview animations directly on the canvas before publishing.

  📄️Scroll Into View

  The Scroll Into View trigger plays a preset entrance animation once as an element scrolls into view — the simplest Nectarblocks trigger type.

  📄️Scroll Position

  Build a custom scrubbed animation by defining Start and End states that play smoothly based on the element's scroll position.

  📄️Interaction

  Animate any block on hover or focus with the Interaction trigger, playing forward on hover and reversing when the pointer leaves.

You Should Know

Beyond the general Animation System, specific Nectar blocks provide their own unique animation settings. For instance, the Text block offers animation settings for animating each letter individually. Another example includes the Row and Column Blocks, which feature animation settings associated with background layers (such as parallax and zoom effects).