Premium element

Visual Effect

Scroll Reveal

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.

Preview

Quick Setup

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=true

Required

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=true

Required

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=true

Required

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=true

Required

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.

Advanced configuration

data-scroll-start

Optional

Sets when the data-scroll-next section begins to fade in relative to the scroll position.

Default: 0.7

data-scroll-scale

Optional

Sets the initial scale of the data-scroll-text-in element as it begins to animate.

Default: 4

data-scroll-ease

Optional

Controls the easing function for the animation, influencing how smoothly elements scale and fade. start, end, smooth or extra-smooth.

Default: none.

data-scroll-speed

Optional

Determines the speed of the scroll-triggered animations and the pinning duration of the section.

Default: 1

We're here to help

Choose how you'd like to connect with our support team

Contact Support

Get help from our team of experts

Response within 24 hours