--- 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-09-28 lang: en author: "Aditya Sharma" description: "A long page arrives all at once. Having each section appear as the reader reaches it gives the page a sense of pace and marks where one idea ends and..." image: https://nexterwp.com/wp-content/uploads/2024/11/How-to-Add-On-Scroll-Animation-in-WordPress_-1024x519.jpg word_count: 539 --- # 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. A long page arrives all at once. Having each section appear as the reader reaches it gives the page a sense of pace and marks where one idea ends and the next begins. On-scroll animation plays a short entrance for a block the first time it comes into view. [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/extras/wordpress-on-scroll-content-animations/) ## Before You Start - **Edition:** **Pro** — on-scroll animations needs Nexter Blocks Pro.- **Block to enable:** any Nexter block, switched on under **Nexter > Blocks** in your WordPress dashboard.- This is an **Advanced tab** option, so it is available on Nexter blocks generally rather than being a block of its own. Open any Nexter block and look under **Advanced**.- A page long enough to scroll. The effect cannot be judged in the editor. ## Steps - Select your block and open the **Advanced** tab. ![Advanced tab with the On Scroll Animation panel open](https://nexterwp.com/wp-content/uploads/2026/09/rs-on-scroll-panel.webp) - Switch **on scroll animation** on. - Choose the **animation** — a fade, a slide, a zoom. - Set the **duration** and any **delay**. - Publish and scroll the real page. ## How It Behaves The choice is written onto the block, and the plugin's script plays it when the block enters the viewport. - **Measured on a published page:** the block's wrapper gained `tpgb-view-animation` together with a `data-animationsetting` attribute carrying the settings chosen.- **It runs on entering the viewport**, not on page load, so a block far down the page waits until the reader gets there.- **Delay stacks up.** Staggering several blocks looks good; a long delay on a block the reader has already reached just looks broken.- **It is a Pro feature but does not need a Pro block** — it is an Advanced tab option, so it applies to free Nexter blocks too, as long as Pro is active.- **Measured with Nexter Blocks Pro deactivated:** the effect disappears entirely and the block renders as though the option had never been set. ## Limitations - **Pro only** — measured with Nexter Blocks Pro deactivated, neither the class nor the data attribute is rendered and blocks simply appear.- **Animating everything defeats it.** When every block slides in, none of them stands out and the page feels slow to use.- **Content animated in is not visible immediately**, which matters for anything a visitor may be scrolling quickly to find.- **Movement is a genuine accessibility issue.** Some people get motion sickness from entrance animations; keep them short and subtle.- **Avoid it above the fold.** Animating the first thing on the page delays the one thing every visitor sees. ## Troubleshooting ### Nothing animates Check Nexter Blocks Pro is active — measured, no animation attributes are rendered without it. Then check you are on the published page rather than the editor. ### It only plays once That is the intended behaviour: the entrance plays when the block first comes into view. ### The block is invisible It is waiting to animate but the trigger has not fired — usually a JavaScript error from another plugin on the page. Check the browser console. ### It feels sluggish Too many animated blocks, or durations that are too long. Shorten both. ### It plays before I reach the block Short blocks near the top of a tall screen can already be in view when the page loads. Move the animation to a block further down. ## Related Docs - [Add a transform effect in WordPress](https://nexterwp.com/docs/add-a-transform-effect-in-wordpress/)- [Add a glassmorphism effect in WordPress](https://nexterwp.com/docs/add-glassmorphism-effect-in-wordpress/)- [Add SEO friendly lazy loading in WordPress](https://nexterwp.com/docs/add-seo-friendly-lazy-loading-in-wordpress/)- [Advanced tab settings](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/) ## 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.