Support for Staggered Animations

[fabioquarantini]

Proposal to add support for staggered animations in the library, allowing for incremental delays on list or grid items.
This feature would enable smoother and more appealing animation effects without relying on manual utilities or JavaScript.
Thank you for considering this request!

[KevinGrajeda]

I'd love to add this feature, but I'm not sure how to do it with CSS. Maybe in the future, we can use something like sibling-index(), but for now, it's not supported. If anyone has an idea on how to implement it, I'd love to hear it. In the meantime, I think the best way to do this is with CSS variables, something like this:
https://x.com/k_grajeda/status/1843388113017835644

[BennyHinrichs]

This is a way to do it

const motionDelays = {
  0: "[--motion-delay:0ms]",
  1: "[--motion-delay:50ms]",
  2: "[--motion-delay:100ms]",
  3: "[--motion-delay:150ms]",
};
items.map((item, i) => (
  <div className={`motion-translate-y-in-100 ${motionDelays[i as keyof typeof motionDelays]}`}>{item.name}</div>
)

Probably not as clean as the style={} method, but just putting it out there