animation of elements in a group about sal HOT 4 CLOSED

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.

from sal.

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)?

from sal.

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.

from sal.

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

from sal.