{"id":2901,"date":"2025-05-21T22:22:17","date_gmt":"2025-05-21T19:22:17","guid":{"rendered":"https:\/\/jasonblackeye.com\/?p=2901"},"modified":"2026-02-19T19:32:48","modified_gmt":"2026-02-19T17:32:48","slug":"creating-a-custom-intro-animation-with-next-bricks-in-bricks-builder","status":"publish","type":"post","link":"https:\/\/jasonblackeye.com\/el\/creating-a-custom-intro-animation-with-next-bricks-in-bricks-builder\/","title":{"rendered":"Creating a Custom Intro Animation with Next Bricks in Bricks Builder"},"content":{"rendered":"<p>In this video, I walk you through how I created a custom intro animation for my website using the Animator tool from <strong><a href=\"https:\/\/nextbricks.io\/?aff=b2e14102\" target=\"_blank\" rel=\"noreferrer noopener\">Next Bricks<\/a><\/strong> inside Bricks Builder. <\/p>\n\n\n\n<p>Instead of simply copying a template, the goal is to help you understand the logic behind creating smooth, layered animations \u2014 from image sequences to text reveals \u2014 all within a reusable and modular workflow.<\/p>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\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=\"Creating a Custom Intro Animation with Next Bricks Animator in Bricks Builder\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/U2rF0c3rUy4?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:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>Step 1: Create a New Template<\/strong><\/p>\n\n\n\n<p>Let\u2019s start by creating a new Template in Bricks Builder.<br>Choose the <strong>Section<\/strong> template type, and I\u2019m naming it Intro Template.<br>Then click Edit with Bricks to get started.<\/p>\n\n\n\n<p><strong>Step 2: Add Section and Container<\/strong><\/p>\n\n\n\n<p>Inside the canvas, we add a new Section, which automatically includes a Container.<br>For better organization, I\u2019m giving both of them clear names.<\/p>\n\n\n\n<p><strong>Step 3: Section Settings<\/strong><\/p>\n\n\n\n<p>Now select the Section.<br>Set the height to <strong>100vh<\/strong> and the Z-index to <strong>999<\/strong>.<br>Yes, I like playing with the nines\u2014but 999 is generally a safe choice to keep it above all other content.<br>Next, set the position to fixed, top 0, give it a background color (here I\u2019m using gray), and use flex align: center to center the content.<\/p>\n\n\n\n<p><strong>Step 4: Add Image Block<\/strong><\/p>\n\n\n\n<p>Now we add a Block, and I\u2019ll name it Images.<br>Inside this block, we\u2019ll place several DIVs, each one representing an image.<br>I\u2019m giving each DIV a height and width of 480px\u2014but of course, you can adjust this however you like.<\/p>\n\n\n\n<p>Create a class, let\u2019s say <strong>.intro-image<\/strong>, and set the position to absolute.<br>Then, simply duplicate this DIV 4 more times\u2014or as many times as the number of images you want.<\/p>\n\n\n\n<p><strong>Step 5: Insert the Images<\/strong><\/p>\n\n\n\n<p>Now, assign your images to each DIV.<br><em><strong>Important<\/strong>: Apply the image at the ID level (CSS ID) and not inside the class.<br>The class was made to give them shared styling like size and position\u2014this is crucial for the animation to work properly.<\/em><\/p>\n\n\n\n<p><strong>Step 6: Add the Text<\/strong><\/p>\n\n\n\n<p>Let\u2019s add a Basic Text element.<br>Set your desired font size, use position: absolute, and a Z-index of 1 so it appears above the images.<\/p>\n\n\n\n<p>Here, I\u2019m also using <strong>Mix Blend Mode: Difference,<\/strong> which gives a nice effect when text sits on top of images. <em><strong>Just don\u2019t forget<\/strong>: the text color should be white for this blend mode to work correctly.<\/em><\/p>\n\n\n\n<p><strong>Step 7: Open Next Bricks Animator<\/strong><\/p>\n\n\n\n<p>Now let\u2019s open the Animator panel in Next Bricks.<br>Inside the folders, create a new Timeline and name it Intro Tutorial.<br>For the Event, choose On Load, and for the Trigger, use &#8220;<strong>main<\/strong>&#8220;\u2014this makes the animation play as soon as the page loads.<\/p>\n\n\n\n<p><strong>Step 8: Animate the Images<\/strong><\/p>\n\n\n\n<p>Let\u2019s start with the first animation, which will animate the images.<\/p>\n\n\n\n<p><strong>Here\u2019s the trick:<\/strong> we use the .intro-image class to target all image DIVs.<br>Using the Stagger setting, we tell it to play the animation one-by-one, with a slight delay between each image.<\/p>\n\n\n\n<p>In the Method, choose From > To, and animate the dimensions from 0px to 480px so that the images grow one after another.<\/p>\n\n\n\n<p>In my real intro, I also add a Fade-In effect, which you can do easily by animating opacity from 0 to 1.<br>You can customize this however you like\u2014I\u2019m just showing the process.<\/p>\n\n\n\n<p><em><strong>Quick Note<\/strong>: You might notice a small area still visible at the bottom of the DIV.<br>To fix this, go back to the image DIV and\u2014with the class selected\u2014set min-height to 0px.<\/em><\/p>\n\n\n\n<p><strong>Step 9: Reveal the Text<\/strong><\/p>\n\n\n\n<p>Now let\u2019s create the second animation: revealing the text.<br>Make a new animation and name it Text Reveal.<br>Set the Duration to 0.5 seconds, and target the text element.<\/p>\n\n\n\n<p>In the Method, animate opacity from 0 to 1, and use Transform: Translate Y from 100px to 0px.<br>This will make the text fade in and move upward at the same time.<\/p>\n\n\n\n<p><strong>Step 10: Remove the Section<\/strong><\/p>\n\n\n\n<p>Finally, we\u2019ll make the entire Section disappear once the other two animations are done.<\/p>\n\n\n\n<p>Create the third animation, and set it to play slightly after the first two finish.<br>In the Method, set Transform: Translate Y to -100vh, so the entire section moves out of view, going upwards.<\/p>\n\n\n\n<p><strong>And that\u2019s it!<br><\/strong>That\u2019s the full process of how I built the intro animation on my website using Next Bricks and Bricks Builder.<\/p>","protected":false},"excerpt":{"rendered":"<p>Learn how to build a custom intro animation using Next Bricks Animator in Bricks Builder \u2014 perfect for standout website openings.<\/p>","protected":false},"author":1,"featured_media":2904,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_seopress_robots_primary_cat":"none","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","footnotes":""},"categories":[13],"tags":[],"class_list":["post-2901","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\/2901","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=2901"}],"version-history":[{"count":0,"href":"https:\/\/jasonblackeye.com\/el\/wp-json\/wp\/v2\/posts\/2901\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jasonblackeye.com\/el\/wp-json\/wp\/v2\/media\/2904"}],"wp:attachment":[{"href":"https:\/\/jasonblackeye.com\/el\/wp-json\/wp\/v2\/media?parent=2901"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jasonblackeye.com\/el\/wp-json\/wp\/v2\/categories?post=2901"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jasonblackeye.com\/el\/wp-json\/wp\/v2\/tags?post=2901"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}