search

formkit / auto-animate

A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application.
https://auto-animate.formkit.com
MIT License
11.94k stars 210 forks source link

Staggered Animations? #44

Open MentalGear opened 2 years ago

MentalGear commented 2 years ago

Great library, thank you for this!

I'm wondering if there's also a config option to apply delays between animations starts for a staggered transition. Use case: Loading a list to animate in one item after another instead of all at once.

Also, if there are click animation events on the list items (via svelte animate), hopefully these "animate in/out" delay shouldn't be applied on an item the user clicks on.

justin-schroeder commented 1 year ago

There is not a config for this, although it's certainly feasible, we want to make sure the surface area of the API stays itty-bitty. But this seems small enough it may be worth looking into.

harrisrobin commented 1 year ago

Add me on the list of those interested in this ✍🏽

AlejandroAkbal commented 7 months ago

I am interested too ✌

oskarAtWork commented 7 months ago

Also interested

nathanziarek commented 6 months ago

Super interested (if adding "super" helps prioritize). This library is amazing; the only thing that keeps me going back to Framer is the ability to stagger animate children.

strblr commented 5 months ago

Would love that too!

bflemi3 commented 3 weeks ago

This blog post has an example doing just that... https://blog.logrocket.com/animate-react-components-using-autoanimate/#chaining-animation-sequences