Scroll Reveal

Scroll Reveal lets you animate multiple sections or items at once as visitors scroll through your page. Normally, if you want to animate multiple elements, you need to select each element individually and configure its Animation settings under the Advanced tab.

With Scroll Reveal, you can apply the animation from the parent level instead. EComposer will automatically reveal the supported child items one by one, with a delay between each item.

You can use Scroll Reveal for:

• Page: Reveal all sections on the page one by one.
• Section: Reveal the first-level columns or elements inside a section one by one.
• Product Grid element: Reveal product cards one by one.
• Articles element: Reveal article cards one by one.

This makes it much faster to create consistent staggered animations without configuring every item individually.

1. How to use Scroll Reveal

You can apply Scroll Reveal to the whole page, an individual section, Product Grid, or Blog Articles depending on which content you want to animate.

1.1. Apply Scroll Reveal to the whole page

Use this option when you want all sections on the page to reveal one by one as visitors scroll down. Instead of configuring an animation for each section individually, you can enable Scroll Reveal once for the entire page.

Step 1: From the top toolbar in the EComposer editor, click the Scroll Reveal icon to open the Scroll Reveal settings.
Step 2: Turn on the Enable Scroll Reveal option. Once enabled, EComposer applies the reveal effect to the sections on the page.
Step 3: Click Animation Style and select how you want the sections to appear. Available styles include Fade Up, Fade In, Slide Left, and Zoom In.
Step 4: Use Delay Between Items to control the delay between each section’s appearance. You can set the delay from 50ms to 300ms.
Step 5: Click Preview animation to check the effect before publishing your page.