{"id":51694,"date":"2026-05-12T10:00:01","date_gmt":"2026-05-12T10:00:01","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&#038;p=51694"},"modified":"2026-05-12T10:05:25","modified_gmt":"2026-05-12T10:05:25","slug":"how-to-apply-scroll-reveal-effect","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/","title":{"rendered":"How to Apply a Scroll Reveal Effect"},"content":{"rendered":"\n<p>A 2.0.0 <em>JetTricks <\/em>release offers a <strong>Scroll Reveal <\/strong>effect for the widgets and blocks on your WordPress site. One of the main features of the <strong>Scroll Reveal<\/strong> effect is its ability to animate elements on scroll in Elementor and Gutenberg builders with no coding natively.&nbsp;<\/p>\n\n\n\n<p>In this guide, we explain what the <em>JetTricks <\/em><strong>Scroll Reveal<\/strong> extension is, how it works, and how to apply and set it up.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-is-scroll-reveal-in-jettricks\">What is Scroll Reveal in JetTricks<\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>The <em>JetTricks<\/em> <strong>Scroll Reveal<\/strong> effect extension is a user interface animation technique where elements on a webpage become visible or animated as they enter the viewport during scrolling.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>Why the <em>JetTricks<\/em> <strong>Scroll Reveal<\/strong> effect can be useful:<\/p>\n\n\n\n<ul>\n<li>improves visual engagement;<\/li>\n\n\n\n<li>guides the user\u2019s attention through content;<\/li>\n\n\n\n<li>makes long pages feel more dynamic and less overwhelming.<\/li>\n<\/ul>\n\n\n\n<p>You can also refer to our video overview of the <em>JetTricks<\/em> <strong>Scroll Reveal<\/strong> effect extension.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"JetTricks 2.0: Scroll Reveal, Parallax &amp; Sticky for Gutenberg\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/eryLVx_87HY?start=140&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-to-enable-scroll-reveal-extension\">How to Enable Scroll Reveal Extension<\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>To enable the <strong>Scroll Reveal<\/strong> extension, proceed to <strong><em>WordPress Dashboard &gt; Crocoblock &gt; JetPlugins Settings &gt; JetTricks &gt; Widgets &amp; Extensions &gt; Available Extensions<\/em><\/strong> and enable the <strong>Scroll Reveal Extension<\/strong> toggle.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2026\/05\/enable-scroll-reveal-extension-toggle-1824x1140-1.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2026\/05\/enable-scroll-reveal-extension-toggle-1824x1140-1-1024x640.webp\" alt=\"enable scroll reveal extension toggle\" class=\"wp-image-51695\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2026\/05\/enable-scroll-reveal-extension-toggle-1824x1140-1-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2026\/05\/enable-scroll-reveal-extension-toggle-1824x1140-1-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2026\/05\/enable-scroll-reveal-extension-toggle-1824x1140-1-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2026\/05\/enable-scroll-reveal-extension-toggle-1824x1140-1-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2026\/05\/enable-scroll-reveal-extension-toggle-1824x1140-1-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2026\/05\/enable-scroll-reveal-extension-toggle-1824x1140-1.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-to-apply-scroll-reveal-to-a-widgetblock\">How to Apply Scroll Reveal to a Widget\/Block<\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>Once the extension is enabled, open the page in the Elementor or Gutenberg editor. Add or edit the needed widget.&nbsp;<\/p>\n\n\n\n<p>Proceed to the <strong>Advanced <\/strong>tab of the widget\u2019s settings and open the <strong>JetTricks <\/strong>section. Here, enable the <strong>Scroll Reveal <\/strong>toggle.&nbsp;<\/p>\n\n\n\n<p>Once the <em>JetTricks <\/em><strong>Scroll Reveal<\/strong> toggle is on, the following settings appear available. First, you can select the desirable <strong>Effect <\/strong>from the dropdown menu:&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2026\/05\/enable-scroll-reveal-1824x1140-1.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2026\/05\/enable-scroll-reveal-1824x1140-1-1024x640.webp\" alt=\"enable scroll reveal\" class=\"wp-image-51696\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2026\/05\/enable-scroll-reveal-1824x1140-1-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2026\/05\/enable-scroll-reveal-1824x1140-1-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2026\/05\/enable-scroll-reveal-1824x1140-1-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2026\/05\/enable-scroll-reveal-1824x1140-1-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2026\/05\/enable-scroll-reveal-1824x1140-1-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2026\/05\/enable-scroll-reveal-1824x1140-1.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<ul>\n<li><strong>Fade Up<\/strong> \u2014 the element appears gradually while moving upward into its original position. Creates a smooth and lightweight entrance effect;<\/li>\n\n\n\n<li><strong>Fade Down<\/strong> \u2014 the element fades into view while slightly moving downward. Often used to create a soft descending animation;<\/li>\n\n\n\n<li><strong>Fade Left<\/strong> \u2014 the element becomes visible while sliding in from the left side. Helps direct attention horizontally across the page;<\/li>\n\n\n\n<li><strong>Fade Right<\/strong> \u2014 the element fades in while moving from the right side toward its final position. Commonly used for balanced content layouts;<\/li>\n\n\n\n<li><strong>Zoom In<\/strong> \u2014 the element scales up from a smaller size while appearing. Adds emphasis and makes content feel more dynamic;<\/li>\n\n\n\n<li><strong>Zoom Out<\/strong> \u2014 the element appears from a larger scale and settles into its normal size. Creates a cinematic transition effect;<\/li>\n\n\n\n<li><strong>Flip Up<\/strong> \u2014 the element rotates upward during its appearance, creating a 3D flip-style animation that adds depth and interactivity;<\/li>\n\n\n\n<li><strong>Flip Out<\/strong> \u2014 the element flips away as it disappears or transitions, producing a more energetic and attention-grabbing effect;<\/li>\n\n\n\n<li><strong>Mask <\/strong>\u2014 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.<\/li>\n<\/ul>\n\n\n\n<p>There are also other settings offered:&nbsp;<\/p>\n\n\n\n<ul>\n<li><strong>Duration <\/strong>\u2014 the scale allows defining the time the animation will take;&nbsp;<\/li>\n\n\n\n<li><strong>Delay <\/strong>\u2014 the scale allows defining the time after the element is visible and before the animation takes place;&nbsp;<\/li>\n\n\n\n<li><strong>Animate Once<\/strong> \u2014 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);&nbsp;<\/li>\n\n\n\n<li><strong>Viewport offset (px)<\/strong> \u2014 the input adjusts when the reveal triggers relative to the viewport edge. Negative values allow the animation to be started earlier;&nbsp;<\/li>\n\n\n\n<li><strong>Active On<\/strong> \u2014 the input defines the devices on which the animation will be applied.<\/li>\n<\/ul>\n\n\n\n<p>All the same settings can be found in the Gutenberg editor. To reveal the animation block in Gutenberg, open the <strong>JetTricks <\/strong>section and enable the <strong>Scroll Reveal<\/strong> toggle.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2026\/05\/scroll-reveal-in-gutenberg-1824x1140-1.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2026\/05\/scroll-reveal-in-gutenberg-1824x1140-1-1024x640.webp\" alt=\"scroll reveal in gutenberg\" class=\"wp-image-51697\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2026\/05\/scroll-reveal-in-gutenberg-1824x1140-1-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2026\/05\/scroll-reveal-in-gutenberg-1824x1140-1-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2026\/05\/scroll-reveal-in-gutenberg-1824x1140-1-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2026\/05\/scroll-reveal-in-gutenberg-1824x1140-1-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2026\/05\/scroll-reveal-in-gutenberg-1824x1140-1-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2026\/05\/scroll-reveal-in-gutenberg-1824x1140-1.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"mask-effect-special-use-case\">Mask effect: Special use case<\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>The <strong>Mask Scroll Reveal<\/strong> effect is a type of animation for your WordPress site, added to the <em>JetTricks\u2019<\/em> functionality. For WordPress sites focused on creative work, the <strong>Mask <\/strong>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.<\/p>\n\n\n\n<p>The <strong>Mask <\/strong>effect can also be useful for:<\/p>\n\n\n\n<ul>\n<li>hero section banners;<\/li>\n\n\n\n<li>full-width gallery transitions;<\/li>\n\n\n\n<li>before\/after showcases;<\/li>\n\n\n\n<li>product presentation sections;<\/li>\n\n\n\n<li>storytelling landing pages.<\/li>\n<\/ul>\n\n\n\n<p>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 <strong>Mask <\/strong>effect can make scrolling interactions feel more immersive and modern.&nbsp;<\/p>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"faq\">FAQ<\/h2>\n\n\n\n<div class=\"schema-faq wp-block-yoast-faq-block\"><div class=\"schema-faq-section\" id=\"faq-question-1778578940725\"><strong class=\"schema-faq-question\">What is the <strong>Scroll Reveal<\/strong> effect in WordPress?<\/strong> <p class=\"schema-faq-answer\">The <strong>Scroll Reveal<\/strong> effect is an animation technique that makes page elements appear or animate when they enter the viewport during scrolling. In <em>JetTricks<\/em>, this effect can be applied to Elementor widgets and Gutenberg blocks without custom coding.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1778578952399\"><strong class=\"schema-faq-question\">What is the difference between the <strong>Fade <\/strong>and <strong>Mask <\/strong>effects in <em>JetTricks<\/em>?<\/strong> <p class=\"schema-faq-answer\">   &#8211; The <strong>Fade <\/strong>effects reveal elements through opacity and movement transitions, such as sliding up, down, left, or right while gradually appearing.\u00a0<br\/>   &#8211; The <strong>Mask <\/strong>effect, in contrast, reveals content through a clipping or masking animation, where the element progressively emerges from a hidden area.\u00a0<br\/><strong>Fade <\/strong>animations are lighter and simpler, while the <strong>Mask <\/strong>effect creates a more cinematic and visually polished appearance.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1778578982525\"><strong class=\"schema-faq-question\">Does <strong>Scroll Reveal <\/strong>work in Gutenberg without Elementor?<\/strong> <p class=\"schema-faq-answer\">Yes. The <em>JetTricks <\/em><strong>Scroll Reveal <\/strong>extension works natively in both Elementor and Gutenberg editors. In Gutenberg, the settings can be accessed through the <strong>JetTricks <\/strong>section after enabling the <strong>Scroll Reveal<\/strong> toggle for the selected block.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1778578994805\"><strong class=\"schema-faq-question\">Can I apply <strong>Scroll Reveal<\/strong> to a whole section or only to widgets?<\/strong> <p class=\"schema-faq-answer\">The <strong>Scroll Reveal<\/strong> effect can be applied to individual widgets, blocks, containers, or sections, depending on the builder structure. Applying the animation to separate elements usually provides better control over the visual sequence and user experience.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1778579007559\"><strong class=\"schema-faq-question\">How do I control the animation speed and delay?<\/strong> <p class=\"schema-faq-answer\">The animation behavior can be adjusted using the <strong>Duration <\/strong>and <strong>Delay <\/strong>settings in the <strong>JetTricks <\/strong>section. <strong>Duration <\/strong>controls how long the animation takes, while <strong>Delay <\/strong>defines the waiting time before the animation starts after the element enters the viewport.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1778579018229\"><strong class=\"schema-faq-question\">Does the <strong>Scroll Reveal<\/strong> animation repeat every time the user scrolls?<\/strong> <p class=\"schema-faq-answer\">It depends on the <strong>Animate Once<\/strong> setting. When enabled, the animation plays only once. When disabled, the effect repeats each time the element re-enters the viewport.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1778579034387\"><strong class=\"schema-faq-question\">Can <strong>Scroll Reveal<\/strong> animations affect website performance?<\/strong> <p class=\"schema-faq-answer\">Using many animated elements on the same page may slightly affect performance, especially on low-powered devices. For the best experience, use animations selectively and avoid applying heavy effects to every page element simultaneously.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1778579045803\"><strong class=\"schema-faq-question\">Can I disable <strong>Scroll Reveal<\/strong> on mobile devices?<\/strong> <p class=\"schema-faq-answer\">Yes. The <strong>Active On<\/strong> setting allows you to choose on which devices the animation will be displayed, including desktop, tablet, and mobile.<\/p> <\/div> <\/div>\n\n\n\n<p>That\u2019s it. Now you know what the <em>JetTricks<\/em>\u2019 <strong>Scroll Reveal<\/strong> effect is and how to apply it to widgets and blocks on your WordPress site.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Discover what the JetTricks\u2019 Scroll Reveal effect is and how to apply it to widgets and blocks on your WordPress site.<\/p>\n","protected":false},"author":20,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[504],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Apply a Scroll Reveal Effect \u2014 JetTricks | Crocoblock<\/title>\n<meta name=\"description\" content=\"Discover what the JetTricks\u2019 Scroll Reveal effect is and how to apply it to widgets and blocks on your WordPress site.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Apply a Scroll Reveal Effect \u2014 JetTricks | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Discover what the JetTricks\u2019 Scroll Reveal effect is and how to apply it to widgets and blocks on your WordPress site.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-12T10:05:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2026\/05\/enable-scroll-reveal-extension-toggle-1824x1140-1-1024x640.webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"WebPage\",\"FAQPage\"],\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/\",\"name\":\"How to Apply a Scroll Reveal Effect \u2014 JetTricks | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2026-05-12T10:00:01+00:00\",\"dateModified\":\"2026-05-12T10:05:25+00:00\",\"description\":\"Discover what the JetTricks\u2019 Scroll Reveal effect is and how to apply it to widgets and blocks on your WordPress site.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/#breadcrumb\"},\"mainEntity\":[{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/#faq-question-1778578940725\"},{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/#faq-question-1778578952399\"},{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/#faq-question-1778578982525\"},{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/#faq-question-1778578994805\"},{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/#faq-question-1778579007559\"},{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/#faq-question-1778579018229\"},{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/#faq-question-1778579034387\"},{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/#faq-question-1778579045803\"}],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Apply a Scroll Reveal Effect\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Question\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/#faq-question-1778578940725\",\"position\":1,\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/#faq-question-1778578940725\",\"name\":\"What is the Scroll Reveal effect in WordPress?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"The <strong>Scroll Reveal<\/strong> effect is an animation technique that makes page elements appear or animate when they enter the viewport during scrolling. In <em>JetTricks<\/em>, this effect can be applied to Elementor widgets and Gutenberg blocks without custom coding.\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/#faq-question-1778578952399\",\"position\":2,\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/#faq-question-1778578952399\",\"name\":\"What is the difference between the Fade and Mask effects in JetTricks?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"   - The <strong>Fade <\/strong>effects reveal elements through opacity and movement transitions, such as sliding up, down, left, or right while gradually appearing.\u00a0<br\/>   - The <strong>Mask <\/strong>effect, in contrast, reveals content through a clipping or masking animation, where the element progressively emerges from a hidden area.\u00a0<br\/><strong>Fade <\/strong>animations are lighter and simpler, while the <strong>Mask <\/strong>effect creates a more cinematic and visually polished appearance.\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/#faq-question-1778578982525\",\"position\":3,\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/#faq-question-1778578982525\",\"name\":\"Does Scroll Reveal work in Gutenberg without Elementor?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Yes. The <em>JetTricks <\/em><strong>Scroll Reveal <\/strong>extension works natively in both Elementor and Gutenberg editors. In Gutenberg, the settings can be accessed through the <strong>JetTricks <\/strong>section after enabling the <strong>Scroll Reveal<\/strong> toggle for the selected block.\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/#faq-question-1778578994805\",\"position\":4,\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/#faq-question-1778578994805\",\"name\":\"Can I apply Scroll Reveal to a whole section or only to widgets?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"The <strong>Scroll Reveal<\/strong> effect can be applied to individual widgets, blocks, containers, or sections, depending on the builder structure. Applying the animation to separate elements usually provides better control over the visual sequence and user experience.\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/#faq-question-1778579007559\",\"position\":5,\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/#faq-question-1778579007559\",\"name\":\"How do I control the animation speed and delay?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"The animation behavior can be adjusted using the <strong>Duration <\/strong>and <strong>Delay <\/strong>settings in the <strong>JetTricks <\/strong>section. <strong>Duration <\/strong>controls how long the animation takes, while <strong>Delay <\/strong>defines the waiting time before the animation starts after the element enters the viewport.\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/#faq-question-1778579018229\",\"position\":6,\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/#faq-question-1778579018229\",\"name\":\"Does the Scroll Reveal animation repeat every time the user scrolls?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"It depends on the <strong>Animate Once<\/strong> setting. When enabled, the animation plays only once. When disabled, the effect repeats each time the element re-enters the viewport.\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/#faq-question-1778579034387\",\"position\":7,\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/#faq-question-1778579034387\",\"name\":\"Can Scroll Reveal animations affect website performance?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Using many animated elements on the same page may slightly affect performance, especially on low-powered devices. For the best experience, use animations selectively and avoid applying heavy effects to every page element simultaneously.\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/#faq-question-1778579045803\",\"position\":8,\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/#faq-question-1778579045803\",\"name\":\"Can I disable Scroll Reveal on mobile devices?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Yes. The <strong>Active On<\/strong> setting allows you to choose on which devices the animation will be displayed, including desktop, tablet, and mobile.\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Apply a Scroll Reveal Effect \u2014 JetTricks | Crocoblock","description":"Discover what the JetTricks\u2019 Scroll Reveal effect is and how to apply it to widgets and blocks on your WordPress site.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/","og_locale":"en_US","og_type":"article","og_title":"How to Apply a Scroll Reveal Effect \u2014 JetTricks | Crocoblock","og_description":"Discover what the JetTricks\u2019 Scroll Reveal effect is and how to apply it to widgets and blocks on your WordPress site.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/","og_site_name":"Help Center","article_modified_time":"2026-05-12T10:05:25+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2026\/05\/enable-scroll-reveal-extension-toggle-1824x1140-1-1024x640.webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["WebPage","FAQPage"],"@id":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/","name":"How to Apply a Scroll Reveal Effect \u2014 JetTricks | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2026-05-12T10:00:01+00:00","dateModified":"2026-05-12T10:05:25+00:00","description":"Discover what the JetTricks\u2019 Scroll Reveal effect is and how to apply it to widgets and blocks on your WordPress site.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/#breadcrumb"},"mainEntity":[{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/#faq-question-1778578940725"},{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/#faq-question-1778578952399"},{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/#faq-question-1778578982525"},{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/#faq-question-1778578994805"},{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/#faq-question-1778579007559"},{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/#faq-question-1778579018229"},{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/#faq-question-1778579034387"},{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/#faq-question-1778579045803"}],"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Apply a Scroll Reveal Effect"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}},{"@type":"Question","@id":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/#faq-question-1778578940725","position":1,"url":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/#faq-question-1778578940725","name":"What is the Scroll Reveal effect in WordPress?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"The <strong>Scroll Reveal<\/strong> effect is an animation technique that makes page elements appear or animate when they enter the viewport during scrolling. In <em>JetTricks<\/em>, this effect can be applied to Elementor widgets and Gutenberg blocks without custom coding.","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/#faq-question-1778578952399","position":2,"url":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/#faq-question-1778578952399","name":"What is the difference between the Fade and Mask effects in JetTricks?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"   - The <strong>Fade <\/strong>effects reveal elements through opacity and movement transitions, such as sliding up, down, left, or right while gradually appearing.\u00a0<br\/>   - The <strong>Mask <\/strong>effect, in contrast, reveals content through a clipping or masking animation, where the element progressively emerges from a hidden area.\u00a0<br\/><strong>Fade <\/strong>animations are lighter and simpler, while the <strong>Mask <\/strong>effect creates a more cinematic and visually polished appearance.","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/#faq-question-1778578982525","position":3,"url":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/#faq-question-1778578982525","name":"Does Scroll Reveal work in Gutenberg without Elementor?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"Yes. The <em>JetTricks <\/em><strong>Scroll Reveal <\/strong>extension works natively in both Elementor and Gutenberg editors. In Gutenberg, the settings can be accessed through the <strong>JetTricks <\/strong>section after enabling the <strong>Scroll Reveal<\/strong> toggle for the selected block.","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/#faq-question-1778578994805","position":4,"url":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/#faq-question-1778578994805","name":"Can I apply Scroll Reveal to a whole section or only to widgets?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"The <strong>Scroll Reveal<\/strong> effect can be applied to individual widgets, blocks, containers, or sections, depending on the builder structure. Applying the animation to separate elements usually provides better control over the visual sequence and user experience.","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/#faq-question-1778579007559","position":5,"url":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/#faq-question-1778579007559","name":"How do I control the animation speed and delay?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"The animation behavior can be adjusted using the <strong>Duration <\/strong>and <strong>Delay <\/strong>settings in the <strong>JetTricks <\/strong>section. <strong>Duration <\/strong>controls how long the animation takes, while <strong>Delay <\/strong>defines the waiting time before the animation starts after the element enters the viewport.","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/#faq-question-1778579018229","position":6,"url":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/#faq-question-1778579018229","name":"Does the Scroll Reveal animation repeat every time the user scrolls?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"It depends on the <strong>Animate Once<\/strong> setting. When enabled, the animation plays only once. When disabled, the effect repeats each time the element re-enters the viewport.","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/#faq-question-1778579034387","position":7,"url":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/#faq-question-1778579034387","name":"Can Scroll Reveal animations affect website performance?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"Using many animated elements on the same page may slightly affect performance, especially on low-powered devices. For the best experience, use animations selectively and avoid applying heavy effects to every page element simultaneously.","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/#faq-question-1778579045803","position":8,"url":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-scroll-reveal-effect\/#faq-question-1778579045803","name":"Can I disable Scroll Reveal on mobile devices?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"Yes. The <strong>Active On<\/strong> setting allows you to choose on which devices the animation will be displayed, including desktop, tablet, and mobile.","inLanguage":"en-US"},"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/51694"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/20"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=51694"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=51694"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=51694"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}