Skip to content

How to Add Image Reveal Animation on Scroll in Elementor?

Table Of Content

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.

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

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 feature to apply a custom shape to an image, which pairs well with scroll reveal effects.

Related Frequently Asked Questions

Related Docs