--- 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-09-15 lang: en author: "Aditya Sharma" description: "A reveal animation hides an image behind a block of colour and wipes that colour away as the visitor scrolls down to it, so the picture arrives rather than simply..." image: https://theplusaddons.com/wp-content/uploads/2024/05/How-to-Add-Image-Reveal-Animation-on-Scroll-in-Elementor_-2-1024x536.jpg word_count: 688 --- # How to Add Image Reveal Animation on Scroll in Elementor? ## - Creative Image widget uses the Scroll Reveal Image style to hide an image behind a colour block and wipe it away on scroll, with Animated Background Color and Animation Direction as the two setup controls. - The Plus Addons for Elementor Pro is required for Creative Image, and the widget appears under Plus Advanced after it is switched on in The Plus Addons > Widgets. - Scroll Reveal Image triggers when the widget is about 90% down the viewport on the published page, and it runs once per page load instead of replaying on every scroll. - Scroll Reveal Image ignores Image Resolution and Max Width Image, removes Mask Image Shape and Super Parallax, and uses the image as a background instead of an tag, so alt text is not carried to the page. A reveal animation hides an image behind a block of colour and wipes that colour away as the visitor scrolls down to it, so the picture arrives rather than simply being there. The **Creative Image** widget does this with a second image style called **Scroll Reveal Image**. You choose the colour of the wipe and the direction it travels, and that is the whole setup. *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 Pro, make sure it's installed & activated to enjoy all its powers.*** [LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/creative-images-for-elementor/?utm_source=tpae&utm_medium=docs&utm_campaign=text) ## Before You Start - **Edition:** **Pro** — Creative Image is only in The Plus Addons for Elementor Pro. With the Pro plugin switched off the widget is not in the editor at all, and a page that already uses it shows nothing where the widget was.- **Widget to enable:** Creative Image, switched on under **The Plus Addons > Widgets** (in the **Advanced** group there). In the Elementor panel it appears under **Plus Advanced**.- **You need an image:** pick one in **Choose Image** first. With nothing chosen the widget renders the plugin's own grey placeholder, so none of the effects below will look like anything.- **The image needs to be below the fold:** the reveal fires when the widget scrolls into view, so put it far enough down the page that the visitor has to scroll. ## Set Up the Reveal - Add the **Creative Image** widget to the page.- In the **Content** section set **Image Style** to **Scroll Reveal Image**.- Choose your picture in **Choose Image**.- Set **Animated Background Color** to the colour of the wipe.- Pick a direction in **Animation Direction**. ![Animated Background Color and Animation Direction in the Content section](https://theplusaddons.com/wp-content/uploads/2026/09/creativeimage-reveal.webp) ## The Two Settings | Setting | What it does | Default | | ------- | ------------ | ------- | | **Animated Background Color** | The colour of the panel that covers the image and then slides away. Leave it empty and the wipe still happens, in a plain light grey. | empty | | **Animation Direction** | Which way the covering panel travels off the image: **Left**, **Right**, **Top** or **Bottom**. | Left | Pick a colour that belongs to your palette — a brand colour or the section's own background reads far better than the default grey, because the panel is on screen for the whole of the wipe. ## How It Behaves - The reveal fires when the widget is about **90% of the way down the viewport**, on the published page.- It runs **once**. Scrolling back up and down again does not replay it, by design — a reveal that repeats on every pass quickly becomes annoying.- The picture is painted as a background at **full size**, so it always fills its container neatly whatever aspect ratio you upload. ## Limitations - **Image Resolution does nothing in this style.** The full-size file is always used, so resize large originals before uploading rather than relying on a smaller registered size.- **Max Width Image is ignored.** The control is only wired up for the **Creative Image** style. Size the container instead.- **Mask Image Shape and Super Parallax are not available here.** Both switches disappear when you pick **Scroll Reveal Image**, and any values you set before switching style are ignored.- **The image is a background, not an `` tag**, so its alt text is not carried on to the page. Don't use this style for a picture that has to be described to a screen reader. ## Troubleshooting ### The overlay is grey instead of my colour **Animated Background Color** is empty. Set a colour — the grey is the stylesheet's fallback, not a deliberate default. ### The reveal never runs View the published page, not the editor, and make sure the widget starts below the fold. If it is already on screen when the page loads there is no scroll to trigger it. ### It only plays the first time That is intended. The animation is set to trigger once per page load. ### The Mask Image Shape switch disappeared Masking belongs to the **Creative Image** style. Switch **Image Style** back if you need [a custom image mask](https://theplusaddons.com/docs/mask-an-image-in-elementor/). ## Related Docs - [Creative Image Widget: Settings Overview](https://theplusaddons.com/docs/creative-image-widget/)- [How to Mask an Image in Elementor? (Custom Image Mask)](https://theplusaddons.com/docs/mask-an-image-in-elementor/)- [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/)- [How to Add Image Animation in the Creative Image Widget?](https://theplusaddons.com/docs/add-image-animation-in-the-creative-image-widget/) ## Frequently Asked Questions **Q: What do I need before using the scroll reveal image effect in Elementor?** A: The reveal only works in The Plus Addons for Elementor Pro, and the Creative Image widget has to be enabled under The Plus Addons > Widgets. It also needs a real image selected in Choose Image, because an empty field falls back to the plugin’s grey placeholder. Since the animation triggers when the widget scrolls into view, place it below the fold so there is actual scrolling to start it. **Q: Why is my scroll reveal overlay showing grey instead of my chosen colour?** A: That usually means Animated Background Color is still empty. The wipe still runs with a light grey fallback, but that grey comes from the stylesheet, not from the effect itself. Picking a colour matters because the panel stays visible for the whole wipe, so a brand colour or the section background looks cleaner than the default grey. **Q: Why does the image reveal animation not run on my page?** A: The effect fires on the published page when the widget is about 90% down the viewport, so it will not trigger if you are testing inside the editor or if the widget starts already on screen. The practical fix is to place it lower on the page and test it where scrolling actually happens. If there is no scroll event, there is nothing for the reveal to react to. **Q: Does the scroll reveal image keep playing every time I scroll past it?** A: It runs once per page load by design. Scrolling back up and down again does not replay it, which keeps repeated passes from becoming distracting. That behavior matters if you are planning a long page, because this effect is meant to feel like a one-time entrance rather than a looping animation. **Q: Can I use a custom image mask or super parallax with Scroll Reveal Image?** A: Those controls are not available in Scroll Reveal Image. Mask Image Shape and Super Parallax disappear when you switch to this style, and any values set before switching are ignored. If you need masking instead of reveal behavior, The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH points you toward [How to Mask an Image in Elementor? (Custom Image Mask)](https://theplusaddons.com/docs/mask-an-image-in-elementor/). **Q: What is the difference between Scroll Reveal Image and other Creative Image styles?** A: Scroll Reveal Image uses a background-style image that fills its container neatly and wipes away a coloured panel as you scroll into view. That means Image Resolution does nothing here, Max Width Image is ignored, and alt text is not carried over because the image is treated as a background rather than an tag. For more on the widget itself, see [Creative Image Widget: Settings Overview](https://theplusaddons.com/docs/creative-image-widget/).