How to Add Image Reveal Animation on Scroll in WordPress? 

Updated On : April 14, 2026By : Reading Time : 1 minute

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.
Table of Contents

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.

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

LIVE BLOCK LINK

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.

advanced image scroll reveal image demo

About the Author

Photo of Aditya Sharma CMO of NexterWP
CMO at POSIMYTH Innovations · NexterWP · 7 years experience

He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.

WordpressThemesElementorn8nAIClaudeAutomationServer
LinkedIn X Website

Share your Thoughts

Get Instant Answers to all your questions about Nexter Blocks,
Extensions & Theme trained on 1000+ Docs and Videos

Still in Doubt? Let’s Assist You

Raise a ticket Now

Have Feedback or Questions?

Join our WordPress Community on Facebook!

Join Us

Related Frequently Asked Questions

What should I do if the image reveal animation is not working?

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.

Can I use the image reveal animation for background images?

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.

What is the best overlay background color to use for the image reveal effect?

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.

What happens if I forget to add an image before enabling the animation?

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.

Does the image reveal animation work on mobile devices?

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.

Last reviewed: April 14, 2026

Related Docs

How to Add a Before and After Opacity Slider in WordPress?
icon
How to Add a Blend Cursor in WordPress?
icon
How to Add a Blockquote in WordPress?
icon
How to Add a Button in a WordPress Message Box?
icon
How to Add a Button in WordPress Timeline?
icon
How to Add a Call to Action Banner in WordPress?
icon
123……………………………………………………………51