New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
animation of elements in a group #54
Comments
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. |
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 |
Thank you for your help. The solution helped and the problem was gone. |
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)
The text was updated successfully, but these errors were encountered: