Is it possible to stagger animations triggered by inView? (vanilla JS)

[bogdano]

I am very happy that Motion is no longer tied to React.

The documentation is still a little sparse though-- I am assuming that this just isn't possible to do? It doesn't work, but also no errors were thrown either:

inView(".fade-in", ({ target }) => {
        animate(target,
                { opacity: [0, 1]},
                { duration: 0.6, ease: 'easeOut' },
                { delay: stagger(0.9) }
        );
})

[mattgperry]

Yeah it's possible though here target is just one element so it's not going to stagger anything. I think without a sandbox it's hard to imagine what you're trying to - are there multiple .fade-in elements? If so I think it's more likely you want one element to trigger the animation of all of them, which should then be staggered.

inView(parentElement, ({ target }) => {
        animate(".fade-in",
                { opacity: [0, 1]},
                { duration: 0.6, ease: 'easeOut' },
                { delay: stagger(0.9) }
        );
})