---
title: "How to Add On Scroll Animation in WordPress?"
url: https://nexterwp.com/docs/add-on-scroll-animation-in-wordpress/
date: 2024-11-29
modified: 2026-08-18
author: "Aditya Sharma"
description: "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..."
image: https://nexterwp.com/wp-content/uploads/2024/11/How-to-Add-On-Scroll-Animation-in-WordPress_-1024x519.jpg
word_count: 635
---

# How to Add On Scroll Animation in WordPress?

## Key Takeaways

- Nexter Blocks adds On Scroll Animation to any block in the WordPress block editor (Gutenberg), with entrance and exit animations that play as content enters and leaves the viewport.
- On Scroll Animation exposes precise controls for animation type, direction, duration, delay, and easing, including Fade, Slide, Zoom, Bounce, Rotate, and Custom cubic-bezier values.
- Nexter Blocks shows the On Scroll Animation option automatically under Advanced when a block is added, with no additional activation steps.
- On Scroll Animation is a freemium feature in Nexter Blocks, and the PRO version unlocks the Out tab for exit animations.

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

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/extras/wordpress-on-scroll-content-animations/)

## Required Setup

- Make sure the default WordPress Block editor is active. 

- You need to have the [Nexter Blocks](https://wordpress.org/plugins/the-plus-addons-for-block-editor/) plugin installed and activated.

- This is a freemium feature, to unlock the extra options, you need the [PRO version of the Nexter Blocks](https://nexterwp.com/pricing/?utm_source=tpag&utm_medium=docs&utm_campaign=text).

## 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](https://nexterwp.com/docs/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](https://nexterwp.com/docs/add-image-reveal-animation-on-scroll-in-wordpress/).

![On Scroll Animation settings in Nexter Blocks for WordPress](https://nexterwp.com/wp-content/uploads/2024/11/on-scroll-animation-options-video.gif)

Once you configure these settings, each block will animate in and out as visitors scroll through the page.

## Frequently Asked Questions

**Q: Why isn't On Scroll Animation showing up on my block?**
A: The usual blocker is setup, not the feature itself. Nexter Blocks only exposes On Scroll Animation when the default WordPress Block editor is active and the Nexter Blocks plugin is installed and activated. It is also a freemium feature, so the extra options are tied to the PRO version of the Nexter Blocks. If those pieces are in place, the option appears automatically under Advanced for any Nexter Blocks block.

**Q: Can I use On Scroll Animation for landing pages and portfolio sections?**
A: That is exactly where it fits best. Nexter Blocks lists landing pages that reveal sections progressively, portfolio and agency sites with image galleries, headings, or service cards, and product pages that benefit from exit animations. The practical win is pacing: entrance effects keep attention moving as content enters the viewport, while exit effects keep the page feeling active as users scroll past each section.

**Q: What settings matter most for making scroll animations feel smooth?**
A: Duration, delay, and easing do most of the heavy lifting. A slower duration works better for hero sections, while smaller icons or labels usually feel better with a faster motion so the page does not feel sluggish. The page also suggests staggering multiple blocks by 0.1 to 0.2 seconds so they animate in sequence instead of all at once. That small delay makes rows feel intentional instead of noisy.

**Q: How do I make a block animate from a different direction on mobile?**
A: Direction is set per device type, which matters when mobile layouts stack content vertically. Nexter Blocks lets you choose Left, Right, Top, or Bottom for how the block enters the viewport. That means a layout that feels natural on desktop can still be adjusted for mobile without forcing the same motion everywhere. It is useful when a vertical stack would look awkward if every element slid in from the same side.

**Q: What is the difference between entrance and exit animations in WordPress?**
A: Entrance animations play as content enters the viewport, while exit animations play as it leaves. In Nexter Blocks, entrance effects include Fade, Slide, Zoom, Bounce, and Rotate, and they are available on any Nexter Blocks block. Exit animations are marked Pro and use the Out tab with the same controls for direction, duration, delay, and easing. That split matters if you want motion only on reveal or throughout the full scroll journey.

**Q: Does On Scroll Animation work with parallax or image reveal effects?**
A: Nexter Blocks treats these as separate effects that can be used alongside each other. The page points to [How to Add a Parallax Image in WordPress](https://nexterwp.com/docs/add-a-parallax-image-in-wordpress/) for smooth parallax scrolling and [How to Add Image Reveal Animation on Scroll in WordPress](https://nexterwp.com/docs/add-image-reveal-animation-on-scroll-in-wordpress/) for image reveal effects. That separation is useful because it lets you layer motion without assuming one effect replaces another.