How to Apply a Scroll Reveal Effect

The JetTricks Scroll Reveal effect extension is a user interface animation technique where elements on a webpage become visible or animated as they enter the viewport during scrolling.

In simple terms, instead of showing all content at once, parts of the page are initially hidden (or styled with reduced opacity/offset position) and are revealed progressively when the user scrolls down.

Why the JetTricks Scroll Reveal effect can be useful:

• improves visual engagement;
• guides the user’s attention through content;
• makes long pages feel more dynamic and less overwhelming.

You can also refer to our video overview of the JetTricks Scroll Reveal effect extension.

To enable the Scroll Reveal extension, proceed to WordPress Dashboard > Crocoblock > JetPlugins Settings > JetTricks > Widgets & Extensions > Available Extensions and enable the Scroll Reveal Extension toggle.

Once the extension is enabled, open the page in the Elementor or Gutenberg editor. Add or edit the needed widget. 

Proceed to the Advanced tab of the widget’s settings and open the JetTricks section. Here, enable the Scroll Reveal toggle. 

Once the JetTricks Scroll Reveal toggle is on, the following settings appear available. First, you can select the desirable Effect from the dropdown menu: 

• Fade Up — the element appears gradually while moving upward into its original position. Creates a smooth and lightweight entrance effect;
• Fade Down — the element fades into view while slightly moving downward. Often used to create a soft descending animation;
• Fade Left — the element becomes visible while sliding in from the left side. Helps direct attention horizontally across the page;
• Fade Right — the element fades in while moving from the right side toward its final position. Commonly used for balanced content layouts;
• Zoom In — the element scales up from a smaller size while appearing. Adds emphasis and makes content feel more dynamic;
• Zoom Out — the element appears from a larger scale and settles into its normal size. Creates a cinematic transition effect;
• Flip Up — the element rotates upward during its appearance, creating a 3D flip-style animation that adds depth and interactivity;
• Flip Out — the element flips away as it disappears or transitions, producing a more energetic and attention-grabbing effect;
• Mask — the element is revealed through a masking or clipping animation, where content appears progressively from a hidden area. Often used for modern, visually polished transitions.

There are also other settings offered: 

• Duration — the scale allows defining the time the animation will take; 
• Delay — the scale allows defining the time after the element is visible and before the animation takes place; 
• Animate Once — the toggle defines whether the animation repeats once only (when enabled), or if the animation repeats each time the element enters the viewport (when disabled); 
• Viewport offset (px) — the input adjusts when the reveal triggers relative to the viewport edge. Negative values allow the animation to be started earlier; 
• Active On — the input defines the devices on which the animation will be applied.

All the same settings can be found in the Gutenberg editor. To reveal the animation block in Gutenberg, open the JetTricks section and enable the Scroll Reveal toggle.

The Mask Scroll Reveal effect is a type of animation for your WordPress site, added to the JetTricks’ functionality. For WordPress sites focused on creative work, the Mask animation can be used to achieve a cinematic image display. Using this animation, architecture studios or photographers can have project photos gradually emerge as a visitor scrolls. This technique replaces abrupt image appearances with fluid clipping motions from any side, fostering a professional atmosphere and ensuring that users pay close attention to each specific work.

The Mask effect can also be useful for:

• hero section banners;
• full-width gallery transitions;
• before/after showcases;
• product presentation sections;
• storytelling landing pages.

Because the animation reveals content progressively, it adds visual depth without overwhelming the page with aggressive motion effects. Combined with minimal layouts and high-quality visuals, the Mask effect can make scrolling interactions feel more immersive and modern.