{"id":2838,"date":"2025-04-28T20:48:23","date_gmt":"2025-04-28T17:48:23","guid":{"rendered":"https:\/\/jasonblackeye.com\/?p=2838"},"modified":"2026-02-19T19:33:22","modified_gmt":"2026-02-19T17:33:22","slug":"how-to-create-a-scroll-text-reveal-using-next-bricks-animator","status":"publish","type":"post","link":"https:\/\/jasonblackeye.com\/el\/how-to-create-a-scroll-text-reveal-using-next-bricks-animator\/","title":{"rendered":"How to Create a Scroll Text Reveal using Next Bricks Animator"},"content":{"rendered":"<p>In this quick tutorial, I\u2019ll show you how to create an impressive <strong>Scroll Text Reveal<\/strong> animation using the Next Bricks Animator in Bricks Builder.<\/p>\n\n\n\n<p>We\u2019ll use <strong>GSAP animations<\/strong> via the <a href=\"https:\/\/nextbricks.io\/?aff=b2e14102\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Next Bricks Animator<\/strong> <\/a>plugin inside Bricks Builder. This is a great way to bring subtle interactivity and a modern feel to your website.<\/p>\n\n\n\n<p>A full step-by-step video is included below, and you can follow along using the written guide.<\/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=\"How to Create a Scroll Text Reveal using Next Bricks Animator\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/XWbQshFvy_c?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\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><em>The voice in this video is <strong>AI-generated<\/strong>, but the script is entirely written by me!<br>I\u2019m not quite ready yet to record my own voice \u2014 and to be honest, I don\u2019t have the right equipment either (haha). Hopefully, in the future, I\u2019ll be able to do full voice-overs myself!<\/em><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Here\u2019s a step-by-step breakdown:<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open Bricks Builder and access the Animator panel from Next Bricks.<\/li>\n\n\n\n<li>In the Event setting, select \u201cScroll\u201d (the second option).<\/li>\n\n\n\n<li>In the Trigger field, add the CSS ID where you want the animation to start.<\/li>\n\n\n\n<li>In the Element field, add the CSS ID of the text that will be animated.<\/li>\n\n\n\n<li>Activate SplitText and set it to Words and Chars.<\/li>\n\n\n\n<li>Enable Stagger and set a low value \u2014 I used 0.01 for a smooth, continuous reveal.<\/li>\n\n\n\n<li>Under Panel Method, choose From To.<\/li>\n\n\n\n<li>You can leave the From section empty, and go directly to the To settings:<br>\u2022 Select Color and set the color you want the text to reveal into. I chose a dark gray.<\/li>\n\n\n\n<li>Finally, in the Trigger settings, scroll down and activate the \u201cScrub\u201d option and set it to 1 for a smoother scroll-based animation.<\/li>\n<\/ol>\n\n\n\n<p><strong>&#8220;Pro&#8221; Tip<\/strong>:<\/p>\n\n\n\n<p>A similar technique can also be achieved using the \u201c<strong>Scroll Reading<\/strong>\u201d element from <strong><a href=\"https:\/\/nextbricks.io\/?aff=b2e14102\" data-type=\"link\" data-id=\"https:\/\/nextbricks.io\/?aff=b2e14102\" target=\"_blank\" rel=\"noreferrer noopener\">Next Bricks<\/a><\/strong>.<br>However, with the method we used here, you get more control over how letters, words, and colors animate. For example, you can even apply transform effects for a more dynamic reveal.<\/p>\n\n\n\n<p>If you want to use a transform (like moving the text from bottom to top), then you must set values in both the \u201cFrom\u201d and \u201cTo\u201d tabs. For instance, if you want the letters to rise up as they appear, you can set:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>From \u2192 top: 10px<\/li>\n\n\n\n<li>To \u2192 top: 0px<\/li>\n<\/ul>\n\n\n\n<p>This way, the animation looks much smoother and visually engaging!<\/p>","protected":false},"excerpt":{"rendered":"<p>In this quick tutorial, I\u2019ll show you how to create an impressive Scroll Text Reveal animation using the Next Bricks Animator in Bricks Builder.<\/p>","protected":false},"author":1,"featured_media":2843,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_seopress_robots_primary_cat":"none","_seopress_titles_title":"%%post_title%% %%sep%% %%sitetitle%%","_seopress_titles_desc":"In this quick tutorial, I\u2019ll show you how to create an impressive Scroll Text Reveal animation using the Next Bricks Animator in Bricks Builder.","_seopress_robots_index":"","footnotes":""},"categories":[13],"tags":[],"class_list":["post-2838","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"acf":[],"_links":{"self":[{"href":"https:\/\/jasonblackeye.com\/el\/wp-json\/wp\/v2\/posts\/2838","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jasonblackeye.com\/el\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jasonblackeye.com\/el\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jasonblackeye.com\/el\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jasonblackeye.com\/el\/wp-json\/wp\/v2\/comments?post=2838"}],"version-history":[{"count":0,"href":"https:\/\/jasonblackeye.com\/el\/wp-json\/wp\/v2\/posts\/2838\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jasonblackeye.com\/el\/wp-json\/wp\/v2\/media\/2843"}],"wp:attachment":[{"href":"https:\/\/jasonblackeye.com\/el\/wp-json\/wp\/v2\/media?parent=2838"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jasonblackeye.com\/el\/wp-json\/wp\/v2\/categories?post=2838"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jasonblackeye.com\/el\/wp-json\/wp\/v2\/tags?post=2838"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}