---
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-04-14
author: "Aditya Sharma"
description: "Do you want to add an image reveal animation on scroll in WordPress? With the Advanced Image block from Nexter Blocks, you can create beautiful image reveal animation in WordPress...."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-Image-Reveal-Animation-on-Scroll-in-WordPress_-1024x519.jpg
word_count: 147
---

# How to Add Image Reveal Animation on Scroll in WordPress? 

## Key Takeaways

- Nexter Blocks includes the Advanced Image block for creating image reveal animations on scroll.
- Users enable the Scroll Reveal Image toggle in the Special Options tab to activate the animation effect.
- The animation direction can be customized in the Animation Direction section of the Advanced Image block.

Do you want to add an image reveal animation on scroll in WordPress? With the Advanced Image block from Nexter Blocks, you can create beautiful image reveal animation in WordPress.

*To check the complete feature overview documentation of the Nexter Blocks Advanced Image block, [click here](https://nexterwp.com/docs/add-advanced-effects-to-an-image-in-wordpress/).*

***Requirement  - This block is a part of the Nexter Blocks, make sure it's installed & activated to enjoy all its powers.***

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-advanced-image/)

To do this, add the Advanced Image block to the page and follow the steps -

1. Add your image in the **Upload Image** section.

2. Then enable the **Scroll Reveal Image** toggle from the **Special Options** tab.

3. From the **Color** section, you have to add the overlay background color. 

Then, from the **Animation Direction** section, you can select the reveal animation direction.

Now, as you scroll, the image will show with a reveal effect.

![](https://nexterwp.com/wp-content/uploads/2024/12/advanced-image-scroll-reveal-image-demo.gif)

## Frequently Asked Questions

**Q: What should I do if the image reveal animation is not working?**
A: If the image reveal animation isn't functioning, ensure that you have the Advanced Image block from Nexter Blocks installed and activated. This block is essential for enabling the scroll reveal feature. If itu2019s activated and still not working, double-check that you have enabled the Scroll Reveal Image toggle in the Special Options tab.

**Q: Can I use the image reveal animation for background images?**
A: The image reveal animation is specifically designed for images added through the Advanced Image block in Nexter Blocks. This feature enhances the visual appeal of standard images rather than background images. For best results, use it with images that you want to reveal as users scroll down the page.

**Q: What is the best overlay background color to use for the image reveal effect?**
A: Choosing the right overlay background color is crucial for the image reveal effect. A contrasting color can enhance visibility and impact when the image is revealed. Experiment with different colors in the Color section to see what complements your overall design best, ensuring it aligns with your site's theme.

**Q: What happens if I forget to add an image before enabling the animation?**
A: If you enable the scroll reveal animation without adding an image, the animation will not display anything on the page. It's essential to first upload your image in the Upload Image section before activating the animation toggle to ensure the effect works as intended.

**Q: Does the image reveal animation work on mobile devices?**
A: The image reveal animation is designed to work on all devices, including mobile. However, keep in mind that performance may vary based on the device's capabilities. Always test the animation on multiple devices to ensure it provides a smooth experience for all users.