animation of elements in a group

[vixov]

I have a question, can I animate elements in a group (children)? If so, how to do it? I would like to combine animation with a group of the same elements, but so that each subsequent one starts with a slight delay. Something like staggering (gsap)

[mciastek]

Well, staggering is a bit tricky with plain CSS animations. Unfortunately, to achieve staggering you need to manually set delays. For example:

<!-- #1 group -->
<div data-sal="zoom-in"></div>
<div data-sal="zoom-in"></div>

<!-- #2 group -->
<div
  data-sal="slide-up"
  data-sal-delay="300"
></div>

<div
  data-sal="slide-up"
  data-sal-delay="300"
></div>

If you want to have more complex animations, e.g. with staggering, I can suggest to use any JS animation library like GSAP. Let me know if I answered to your question.

[vixov]

ok i set everything manually as you suggest. I have one more point that I can't get over. I don't want to create another thread. If I use slide-left, a side margin is created on the phone screen. It looks bad. Do you have any solution to prevent the browser from making a side margin when the item enters from right to center side of the screen (slide-left)?

[mciastek]

ok i set everything manually as you suggest. I have one more point that I can't get over. I don't want to create another thread. If I use slide-left, a side margin is created on the phone screen. It looks bad. Do you have any solution to prevent the browser from making a side margin when the item enters from right to center side of the screen (slide-left)?

As far as I understood your problem, I think you need to add overflow: hidden; to the container that is a parent of animated elements.

[vixov]

Thank you for your help. The solution helped and the problem was gone.