This snippet (code element) allows you to control animations with one class and delay this animation using attributes. Let’s delve deeper into the explanation.
Original tools in Bricks Builder
As far as you know, Bricks Builder has an awesome tool called Interactions. It’s excellent; I used this tool for my Dark Agency template. However, it’s not perfect; it doesn’t have as many controls as I would like.
For example, the default way to trigger the animation is through content loading. However, there is a problem: if I set a delay for sections further down and view it on mobile, after scrolling, you see an empty space before the section appears. Therefore, you don’t have control over how it works separately on desktop and mobile (only duplication is possible, hiding it on desktop, but that becomes overwhelming).
How BricksBee Motion-Blur effect works
Of course, I use custom CSS for that. There is no native option to implement it. However, this custom CSS is simple. See the results.
By the way, you can grab the BricksBee Magic Animation for free.
The code is quite simple: you have a few lines of @keyframes:
@keyframes bricksbee-down-up-right {
0% {
opacity: 0;
filter: blur(12px);
transform: translate(-24px, -24px);
}
100% {
opacity: 1;
filter: blur(0px);
transform: translate(0px, 0px);
}
}Where is the beauty?
I created this snippet (an element inside the Bricks Builder), and when you paste it, it works like magic. All you have to do is select one of the available classes for now.
.bricksbee-magic-up
.bricksbee-magic-up-left
.bricksbee-magic-up-right
.bricksbee-magic-left
.bricksbee-magic-right
.bricksbee-magic-down
.bricksbee-magic-down-left
.bricksbee-magic-down-rightFirst big win: no need to paste custom CSS to every element you want to control; just select a class.
What about delay?
Correct, if you apply a class that has CSS styles, it affects every element with that class. You either need to create a new class or avoid using classes and work with element ID styles. This can be very hard to maintain!
Correct, if you apply a class that has CSS styles, it affects every element with that class. You either need to create a new class or avoid using classes and work with element ID styles. This can be very difficult to maintain!
That’s it! Full control. Of course, you can experiment with snippet settings to gain more flexibility for mobile, etc. But it’s up to you.
What inside the archive?
You will receive a JSON file that you can paste into the project, and these classes will be added to your list of classes, along with a snippet and instructions, as well as a private video tutorial where I explain how it works.
Don’t you see the value in this flexible approach? Check out how this animation works and grab it for free.
