Do you want to add entrance and exit animations to your content in WordPress? Adding scroll-triggered animations keeps visitors engaged by revealing each section as it enters the viewport.
The On Scroll Animation extension in Nexter Blocks lets you add entrance and exit animations to any block in the WordPress block editor (Gutenberg). Set the animation type, direction, duration, delay, and easing for precise control over how each element appears and disappears on scroll.
Best Used For:
- Landing pages where you want to reveal sections progressively as visitors scroll down
- Portfolio and agency sites with image galleries, headings, or service cards that benefit from entrance effects
- Product pages that use exit animations to maintain a dynamic feel as content leaves the viewport
Required Setup
- Make sure the default WordPress Block editor is active.
- You need to have the Nexter Blocks plugin installed and activated.
- This is a freemium feature, to unlock the extra options, you need the PRO version of the Nexter Blocks.
How to activate the On Scroll Animation?
There are no additional activation steps for On Scroll Animation. When you add any block from Nexter Blocks to your page, the On Scroll Animation option is available automatically under the Advanced tab of that block.
Key Features
- Entrance animation effects — Add a scroll-triggered entrance animation to any Nexter Blocks block. Use this when you want content to fade, slide, zoom, or bounce into view as the visitor scrolls down the page.
- Exit animation effects (Pro) — Add an animation that plays as content leaves the viewport. Use this when you want to maintain a dynamic feel throughout the full scroll journey, not just on entry.
To add smooth parallax scrolling effects alongside your on-scroll animations, see How to Add a Parallax Image in WordPress.
How to Use On Scroll Animation?
Add any block from Nexter Blocks to your page and follow the steps below.
1. Go to Advanced > On Scroll Animation.
2. From the Animation In dropdown under the In tab, select the entrance animation you want to use. This controls how the block enters the viewport — options include Fade, Slide, Zoom, Bounce, and Rotate effects. Use this when you want a specific element such as a heading or image to draw attention as it appears on scroll.
From the Direction dropdown, set the direction from which the animation enters (Left, Right, Top, or Bottom) for each device type. This is useful when your mobile layout stacks content vertically and you need the animation to enter from a different angle than on desktop.
From the Duration dropdown, select a predefined speed or choose Custom to enter a precise value. Use a slower duration for hero sections and a faster one for small icons or labels so the page does not feel sluggish.
In the Animation Delay (s) field, enter the delay in seconds before the animation starts. This helps when you have multiple elements on the same row — stagger the delay on each block by 0.1 to 0.2 seconds so they animate in sequence rather than all at once.
From the Easing dropdown, select how the animation accelerates and decelerates. Predefined options include Ease In, Ease Out, and Ease In Out. Choose Custom to enter a cubic-bezier value for a precise motion curve.
3. To add an exit animation, go to the Out (Pro) tab. From the Animation Out dropdown, select the animation that plays as the block leaves the viewport. Direction, duration, delay, and easing are available for exit animations the same way as for entrance animations.
To add scroll-triggered image reveal effects to your page sections, see How to Add Image Reveal Animation on Scroll in WordPress.
Once you configure these settings, each block will animate in and out as visitors scroll through the page.
