Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Support for Staggered Animations #15

Open
fabioquarantini opened this issue Nov 11, 2024 · 1 comment
Open

Support for Staggered Animations #15

fabioquarantini opened this issue Nov 11, 2024 · 1 comment
Labels
enhancement New feature or request

Comments

@fabioquarantini
Copy link

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!
vishwamartur added a commit to vishwamartur/tailwindcss-motion that referenced this issue Dec 24, 2024
@vishwamartur
Add support for staggered animations
aae2e91 
Related to romboHQ#15

Add support for staggered animations with incremental delays for list or grid items.

* **src/modifiers.js**
  - Add a new utility `motion-stagger` to handle staggered delays for multiple elements.
  - Update the `motion-delay` utility to support staggered delays.
  - Add a new theme configuration for `motionStagger` with predefined values.

* **README.md**
  - Add documentation for the new `motion-stagger` utility.
  - Provide usage example for staggered animations.
@vishwamartur vishwamartur mentioned this issue Dec 24, 2024
Closed
@KevinGrajeda
Copy link
Collaborator

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

@KevinGrajeda KevinGrajeda added the enhancement New feature or request label Dec 31, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@fabioquarantini @KevinGrajeda