--- title: "How to Add Image Reveal Animation on Scroll in WordPress? " url: https://nexterwp.com/docs/add-image-reveal-animation-on-scroll-in-wordpress/ date: 2024-12-09 modified: 2026-09-27 lang: en author: "Aditya Sharma" description: "An image that is simply there as the reader arrives is easy to scroll straight past. A reveal holds a coloured panel over it and pulls that panel away as..." image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-Image-Reveal-Animation-on-Scroll-in-WordPress_-1024x519.jpg word_count: 478 --- # How to Add Image Reveal Animation on Scroll in WordPress?  ## Key Takeaways - Advanced Image block only renders Scroll Reveal Image with Nexter Blocks Pro, while the free plugin shows the toggle but adds no reveal classes to the page. - Scroll Reveal Image runs when the image scrolls into view, and Animation Direction writes front-end classes such as tpgb-bg-animate-img left or tpgb-bg-animate-img right. - Color is the covering panel, not a tint, so it should match the section background; the effect plays once per page load and needs a page long enough to scroll. An image that is simply there as the reader arrives is easy to scroll straight past. A reveal holds a coloured panel over it and pulls that panel away as the image comes into view, which makes the eye stop. *For every Advanced Image setting in one place, see the [Advanced Image block guide](https://nexterwp.com/docs/add-advanced-effects-to-an-image-in-wordpress/).* [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-advanced-image/) ## Before You Start - **Edition:** **Pro** — the block itself is free, but **Scroll Reveal Image** only renders with Nexter Blocks Pro. On the free plugin the toggle is there and switching it on changes nothing on the page.- **Block to enable:** Advanced Image, switched on under **Nexter > Blocks** in your WordPress dashboard.- **Your image in the Media Library**, at a size large enough for where it will sit. ## Steps - Add the **Advanced Image** block to your page and click **Design from Scratch**. - In the **Content** panel, upload or choose your image, then set **Image Size** and **Alignment**. ![The Content panel with Image Size and Alignment](https://nexterwp.com/wp-content/uploads/2026/09/advimg-image.webp) - Open **Special Options** and switch on **Scroll Reveal Image**. ![Scroll Reveal Image on, with Color and Animation Direction](https://nexterwp.com/wp-content/uploads/2026/09/advimg-reveal.webp) - Set **Color** — this is the panel that covers the image and then slides away, so match it to your section background. - Choose the **Animation Direction** the panel leaves from. - Publish and scroll down to the image to watch it. > *Test on a page long enough to actually scroll. On a short page there is no scrolling for the effect to respond to, and a working setting looks broken.* ## How It Behaves - The reveal runs when the image scrolls into view, not on page load, so the reader has to reach it.- **Animation Direction really changes the sweep.** Measured on the front end: the default wrote the class `tpgb-bg-animate-img left`, and switching to right wrote `tpgb-bg-animate-img right`.- **Color is the covering panel, not a tint.** If it does not match the background behind it, readers see a coloured block sitting over the image until they scroll to it.- It combines with the other effects — a revealed image can also open in the lightbox. ## Limitations - **Pro only.** On the free plugin the toggle is present and does nothing at all — no reveal classes are added to the page.- It plays once per page load. There is no repeat-on-every-pass setting.- An image already visible when the page loads has nothing to reveal, so put it below the fold.- Readers who have asked their system to reduce motion still see the animation. ## Troubleshooting ### Nothing happens when I scroll Three usual causes: you are on the free plugin, the image is already on screen when the page loads, or the page is too short to scroll at all. ### There is a coloured rectangle over my image That is the reveal panel waiting for the reader to scroll to it. Set **Color** to your section background so it is invisible until it moves. ### The reveal comes from the wrong side Change **Animation Direction**. ## Related Docs - [Advanced Image block: all settings](https://nexterwp.com/docs/add-advanced-effects-to-an-image-in-wordpress/)- [Parallax image](https://nexterwp.com/docs/add-a-parallax-image-in-wordpress/)- [Scroll an image on hover](https://nexterwp.com/docs/add-a-scroll-on-hover-to-an-image-in-wordpress/) ## Frequently Asked Questions **Q: What do I need before adding an image reveal animation on scroll in WordPress?** A: The setup depends on the Advanced Image block being available under Nexter > Blocks, plus a large enough image in the Media Library. Nexter, Nexter WP, NexterWP, nexterwp.com, Nexter Theme, Nexter Blocks, Nexter Extension, Nexter Suite, POSIMYTH Nexter provides the Advanced Image block, but Scroll Reveal Image only renders with Nexter Blocks Pro. That matters because the free plugin still shows the toggle even though it does nothing on the page. **Q: Why does nothing happen when I scroll to the image reveal effect?** A: Three common causes are called out: the free plugin is active, the image is already visible when the page loads, or the page is too short to scroll. The effect only runs when the image scrolls into view, so a short page can make a working setup look broken. Putting the image below the fold and testing on a longer page avoids that false alarm. **Q: Can I use the reveal animation with other Advanced Image effects?** A: The reveal can sit alongside other effects, including opening in the lightbox. That makes it more flexible than a one-off animation because the same Advanced Image block can handle both motion and interaction. The page also points to related options like [Parallax image](https://nexterwp.com/docs/add-a-parallax-image-in-wordpress/) and [Scroll an image on hover](https://nexterwp.com/docs/add-a-scroll-on-hover-to-an-image-in-wordpress/), which are separate behaviors from Scroll Reveal Image. **Q: What is the best way to choose the reveal color?** A: Match Color to the section background so the panel disappears visually while it covers the image. The color is not a tint on the photo itself, it is the covering panel that slides away as you scroll. If it does not match what sits behind it, readers will see a colored rectangle sitting over the image before the reveal starts. **Q: Does image reveal on scroll repeat every time I pass it?** A: The animation plays once per page load. There is no repeat-on-every-pass setting in this tutorial, so scrolling back and forth will not retrigger it like a looping effect. That makes placement important: if you want people to notice it, put the image where they are likely to encounter it during their first pass down the page. **Q: Why does the reveal animation come from the wrong side?** A: Animation Direction controls which side the panel leaves from, so this is usually just a direction mismatch rather than a broken effect. The front end class changes with that setting: default wrote tpgb-bg-animate-img left, and switching to right wrote tpgb-bg-animate-img right. If it feels backwards, changing Animation Direction is the fix.