Creating a Custom Intro Animation with Next Bricks in Bricks Builder

In this video, I walk you through how I created a custom intro animation for my website using the Animator tool from Next Bricks inside Bricks Builder.

Instead of simply copying a template, the goal is to help you understand the logic behind creating smooth, layered animations — from image sequences to text reveals — all within a reusable and modular workflow.

Step 1: Create a New Template

Let’s start by creating a new Template in Bricks Builder.
Choose the Section template type, and I’m naming it Intro Template.
Then click Edit with Bricks to get started.

Step 2: Add Section and Container

Inside the canvas, we add a new Section, which automatically includes a Container.
For better organization, I’m giving both of them clear names.

Step 3: Section Settings

Now select the Section.
Set the height to 100vh and the Z-index to 999.
Yes, I like playing with the nines—but 999 is generally a safe choice to keep it above all other content.
Next, set the position to fixed, top 0, give it a background color (here I’m using gray), and use flex align: center to center the content.

Step 4: Add Image Block

Now we add a Block, and I’ll name it Images.
Inside this block, we’ll place several DIVs, each one representing an image.
I’m giving each DIV a height and width of 480px—but of course, you can adjust this however you like.

Create a class, let’s say .intro-image, and set the position to absolute.
Then, simply duplicate this DIV 4 more times—or as many times as the number of images you want.

Step 5: Insert the Images

Now, assign your images to each DIV.
Important: Apply the image at the ID level (CSS ID) and not inside the class.
The class was made to give them shared styling like size and position—this is crucial for the animation to work properly.

Step 6: Add the Text

Let’s add a Basic Text element.
Set your desired font size, use position: absolute, and a Z-index of 1 so it appears above the images.

Here, I’m also using Mix Blend Mode: Difference, which gives a nice effect when text sits on top of images. Just don’t forget: the text color should be white for this blend mode to work correctly.

Step 7: Open Next Bricks Animator

Now let’s open the Animator panel in Next Bricks.
Inside the folders, create a new Timeline and name it Intro Tutorial.
For the Event, choose On Load, and for the Trigger, use “main“—this makes the animation play as soon as the page loads.

Step 8: Animate the Images

Let’s start with the first animation, which will animate the images.

Here’s the trick: we use the .intro-image class to target all image DIVs.
Using the Stagger setting, we tell it to play the animation one-by-one, with a slight delay between each image.

In the Method, choose From > To, and animate the dimensions from 0px to 480px so that the images grow one after another.

In my real intro, I also add a Fade-In effect, which you can do easily by animating opacity from 0 to 1.
You can customize this however you like—I’m just showing the process.

Quick Note: You might notice a small area still visible at the bottom of the DIV.
To fix this, go back to the image DIV and—with the class selected—set min-height to 0px.

Step 9: Reveal the Text

Now let’s create the second animation: revealing the text.
Make a new animation and name it Text Reveal.
Set the Duration to 0.5 seconds, and target the text element.

In the Method, animate opacity from 0 to 1, and use Transform: Translate Y from 100px to 0px.
This will make the text fade in and move upward at the same time.

Step 10: Remove the Section

Finally, we’ll make the entire Section disappear once the other two animations are done.

Create the third animation, and set it to play slightly after the first two finish.
In the Method, set Transform: Translate Y to -100vh, so the entire section moves out of view, going upwards.

And that’s it!
That’s the full process of how I built the intro animation on my website using Next Bricks and Bricks Builder.