Scroll Reveal is a web animation effect where content (text, images, sections) appears gradually as the user scrolls down the page.

Add Scroll Reveal to Your Webpage #

Prerequisite:

• Elementor Builder Plugin (Free Version is enough)
• ElementsKit Pro Version

Let’s dive into the main part: Take a new page or an existing one and start editing with the Elementor editor.

Step 1: Find ElementsKit Scroll Reveal module #

1. Select an element
2. Go to Advanced tab
3. Find ElementsKit Scroll Reveal module

Step 2: Enable ElementsKit Scroll Reveal #

Expand ElementsKit scroll reveal and toggle the button to enable it.

Now all the features are unlocked.

• Animation Direction: Defines the path of entry. You can set elements to slide in from the top, bottom, left, or right to guide the user’s focus.
• Transition Delay: The wait time (in ms) before the animation begins. Increase this for staggered “waterfall” effects across multiple columns.
• Animation Speed: The duration (in ms) of the movement. Lower numbers make it “snappy,” while higher numbers make it feel “smooth” or “cinematic.”

• Enable Image Overlay: Toggling this on allows you to set an Overlay Color; toggling it off lets you set the Primary Reveal Color.
• Overlay Color/Primary Reveal Color: The specific color used to mask the image (Overlay) or fill the sliding block (Reveal).
• Reveal Each Time on Scroll: Determines if the animation triggers every time you scroll or only the first time it enters the view.

Now publish the page to save your changes, check your scroll reveal by scrolling up and down to ensure the animations, delays, and colors look exactly as you intended.