motiondivision / motionone

https://motion.dev
MIT License
2.95k stars 52 forks source link

[Feature] Is it possible to utilize `stagger()` as a `delay` within an `inView()` callback? #180

Open korywakefield opened 1 year ago

korywakefield commented 1 year ago

Is your feature request related to a problem? Please describe. I would like to be able to stagger animations for groups of items as they come into view using the inView() and stagger() methods.

Describe the solution you'd like Imagine you have a large list of items on a page and you'd like them to animate in as you scroll down the page. However, I'd like their entrances to be staggered responsively as you move down the page. For example, if on a large desktop there were 5 items across the screen, I'd want each group of 5 to stagger as the items enter. On a smaller screen with only 2 or 3 items across, I'd want just those to animate in.

Describe alternatives you've considered I have looked through the docs, but I am not seeing a potential alternative to what I am attempting to accomplish.

Additional context I have a sandbox setup here where I have coded up what I feel should work in this context, but the stagger() animation is not occurring the way I would expect: https://codesandbox.io/s/nice-surf-4viy6l?file=/src/App.js

florianbouvot commented 1 year ago

@korywakefield did you find a way to use inView() and stagger() together?

EDIT: I try to count element and add delay but I didn't find a way to do that well.

SchahinRohani commented 10 months ago

Trying to achieve this in Qwik. Looking for a way to use inView() and stagger() together.