---
title: "How to Add Image Reveal Animation on Scroll in Elementor?"
url: https://theplusaddons.com/docs/add-image-reveal-animation-on-scroll-in-elementor/
date: 2024-05-10
modified: 2026-08-10
lang: en
author: "Aditya Sharma"
description: "Do you want to add an image reveal animation on scroll in Elementor? The Creative Image widget in The Plus Addons for Elementor includes a Scroll Reveal Image style that..."
image: https://theplusaddons.com/wp-content/uploads/2024/05/How-to-Add-Image-Reveal-Animation-on-Scroll-in-Elementor_-2-1024x536.jpg
word_count: 233
---

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

## 

- Creative Image widget in The Plus Addons for Elementor includes a Scroll Reveal Image style that animates an overlay across an image as the visitor scrolls.
- Scroll Reveal Image setup uses the Image Style dropdown, the Choose Image section, the Animated Background Color section, and the Animation Direction dropdown.
- The Plus Addons for Elementor also includes Mask an Image in Elementor, which applies a custom shape to an image and pairs well with scroll reveal effects.

Do you want to add an image reveal animation on scroll in Elementor? The Creative Image widget in The Plus Addons for Elementor includes a Scroll Reveal Image style that animates an overlay across your image as the visitor scrolls.

**Best Used For:**

- Portfolio and photography websites showcasing work with scroll-triggered image reveals

- Agency landing pages adding visual depth to hero or feature image sections

- Product or service pages drawing attention to key images as users scroll down

*To check the complete feature overview documentation of The Plus Addons for Elementor Creative Image widget, [click here](https://theplusaddons.com/docs/creative-image-widget/).*

***Requirement - This widget is a part of The Plus Addons for Elementor. Make sure it is installed and activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/creative-images-for-elementor/)

To do this, add the Creative Image widget to the page and follow these steps.

1. Select **Scroll Reveal Image** from the **Image Style** dropdown.

2. Add your image in the **Choose Image** section.

3. From the **Animated Background Color** section, set the overlay background color.

From the **Animation Direction** dropdown, select the reveal animation direction.

As you scroll, the image displays with a reveal effect.

The Plus Addons for Elementor also includes the [Mask an Image in Elementor](https://theplusaddons.com/docs/mask-an-image-in-elementor/) feature to apply a custom shape to an image, which pairs well with scroll reveal effects.

***Read Further***: *[How to Add a Scroll on Hover to an Image in Elementor](https://theplusaddons.com/docs/add-a-scroll-on-hover-to-an-image-in-elementor/)*