What is it?

Scroll Reveal introduces dynamic transitions as users scroll, with elements scaling, fading, and moving smoothly to create an engaging experience. It’s especially suited for single-page designs or landing pages where sections reveal themselves as the user scrolls.

How to set it up?

To enable the Scroll Reveal effect on specific sections of your page, add the data-scroll-section, data-scroll-text-in, data-scroll-text-out, and data-scroll-next attributes to your Bricks structure. Each attribute triggers a unique part of the reveal effect, offering customizable scaling, speed, and easing options.

'data-scroll-section'. Defines the primary section for the scroll-triggered effect. Placement: Add this to the container section where you want the scroll effect to apply.

'data-scroll-text-in'. Sets the element to scale and fade at the beginning of the scroll. Placement: Add to text or elements you want to animate as they "enter" during scrolling.

'data-scroll-text-out'. Targets an additional text or element to scale down and fade out during the scroll animation, offering an extra layer to the visual effect.

'data-scroll-next'. Specifies the section or content to reveal after the scroll-triggered animation completes. Placement: Typically added to the section that follows the current scroll section, creating a seamless transition.

'data-scroll-start' (Optional). Sets when the data-scroll-next section begins to fade in relative to the scroll position. Type: Decimal (e.g., 0.7 starts the fade-in at 70% of the scroll). Default: 0.7.

'data-scroll-scale' (Optional). Sets the initial scale of the data-scroll-text-in element as it begins to animate. Type: Number (e.g., 4 for a large scale-in effect). Default: 4.

'data-scroll-ease' (Optional). Controls the easing function for the animation, influencing how smoothly elements scale and fade. Default: none.

'data-scroll-speed' (Optional). Determines the speed of the scroll-triggered animations and the pinning duration of the section. Type: Decimal (e.g., 1 for normal speed, 1.5 for a slower effect). Default: 1.