Skip to main content

Scroll Position

The Scroll Position trigger type enables you to craft a custom animation by defining a Start and End state and smoothly transitioning between them based on the current scroll position.

Adding a Scroll Position animation​

  1. Select the Nectar block you want to animate
  2. Go to the Block Settings panel and scroll down to "Animations"
  3. Click the Add Animation Trigger button
  4. Select Scroll Position as the trigger type
  5. Select the animation you want to use and configure your desired settings

Basic Configuration​

Click the Add Animation Property button to introduce a new property to the animation. You can add as many properties from the list as desired, and each property can be configured individually.

The animation will transition smoothly through the property values specified in the 'Start' of the Scroll Animation field to the 'End.'

By default, properties are added with common ending values, making it easy to create an animation by simply setting the 'Start' values. Nevertheless, you have the flexibility to modify both the 'Start' and 'End' values to your preferences.

Animation Boundaries​

  1. Start On
  • Block Enter - The animation will start when the block enters the viewport.
  • View Center - The animation will start when the block reaches the center of the viewport.
  • Fully Visible - The animation will start when the block is fully visible in the viewport.
  1. End On
  • View Center - The animation will end when the block reaches the center of the viewport.
  • Block Exit - The animation will end when the block exits the viewport.
  • Out of View - The animation will end when the block is invisible out of the viewport.

Scroll Pinning (Advanced)​

Scroll Pinning will cause your block to stick once it's reached and remain in place until the animation has completed. This is an advanced feature that can be used to create some really cool effects ✨

To activate a Scroll Pin, select the "Pin While Animating" option in the Animation Boundaries section of the Scroll Position trigger type options.

Once active, you can specify how long you want to user to have to scroll to complete the animation. This is done by setting the "End After Scrolling" option. The amount in End After Scrolling is equal to the viewport height. i.e. 200% = 2x the viewport height.

Note

The "Pin While Animating" option is only an available option on root level blocks.

Any child blocks of a pinned block will be pinned as well, and you'll notice that the Animation Boundaries of the child blocks will be disabled. This is because the child blocks will inherit the Animation Boundaries of the parent block and follow the same animation rules.