Tip for animating a group of elements

An animation tip.

Try to avoid animating the columns and rows if possible. When you want to animate a group of things (such as image with headline and caption), place them in a DIV bric (yes, there’s a bric called DIV). :wink:

Unless of course you are animating the individual elements themselves. That’s fine, but animating columns and rows in my opinion could be buggy. These are the essential elements of a Bootstrap page layout. Sure it does work, but it’s also prone to being quirky.

6 Likes

Thanks for sharing! :pray:

1 Like

Hi @Whittfield, what’s the difference between a div bric and a normal one?

It’s a bric like any other, except it’s purpose is simply as a container to put other brics inside.

It also can be used as a “spacer” element when you need one.

2 Likes

Thanks for the reply Whitfield. Do you find you use it often?
I’m struggling to think of a use for it outside of the normal brics and blocs.

Its very useful @TrevReav, obviously design dependant.

I recently used the Div bric to create an entire carousel structure for swiper.js without having to use the code bric, which made editing the slide cards I used much easier.

They can also be useful for managing design elements that’s don’t play nice responsively.

2 Likes

As a “spacer” I would use it a lot actually. I prefer spacers in some instances rather than using margins for everything. I can hide adjust the properties for these at each breakpoint.

A lot of people animate with Blocs. Probably one of it’s biggest features to new customers is my guess. A lot of those people are animating the columns and rows. Dare I say most! They should all be placing those elements in a div first. It’s very easy to do. Drag in the DIV bric and place and other bric inside of it.

2 Likes

@Whittfield, what’s wrong with the early HTML days of…

<br><br><br><br><br>

:rofl:

1 Like

:rofl: oh man that’s hilarious. And we’ve all done it! :wink:

1 Like

Excellent. Good tips there. I’m pleased I asked the question.
Cheers both, and have a good weekend.

1 Like

Hi @Whittfield

Just to be clear on this. I assume the setup would be something like this, in which case you would animate the two Div containers rather than the top Column?

Column >>
Div > Heading
Div > Image

Hello, actually if the elements are being animated one at a time, then you wouldn’t really need a div.

if the elements are all getting animated together as a group you would place them in a doc instead of animating the row or column.

Keep in mind this is really more of a suggestion. for cldeaner Markup and to reduce issues that could come up. It’s not a rule. :wink:

1 Like