To see the effect in the demo, scroll down the output window quickly. You'll see with an interval value of 100, there's a delay of a couple of seconds before the last element appears.
A real world scenario is a grid of many card elements, where users may scroll down quickly to browse. The interval option gives a nice effect so long as we scroll slowly, but a quick scroll leads to a long delay before anything appears and the page seems 'broken'.
Ideally, the interval / staggering effect would only stagger items that are visible on-screen. If there are no elements on-screen currently being revealed (actively animating), then the interval should be reset to zero. The on-screen elements would then start animating in immediately, with the interval incrementing only from the first visible element.
If we have lots of elements being revealed, the
intervaloption adds a consecutive delay to all elements, regardless of whether they're on-screen.Demo: https://jsbin.com/puligazura/edit?html,css,js,output
To see the effect in the demo, scroll down the output window quickly. You'll see with an
intervalvalue of100, there's a delay of a couple of seconds before the last element appears.A real world scenario is a grid of many card elements, where users may scroll down quickly to browse. The
intervaloption gives a nice effect so long as we scroll slowly, but a quick scroll leads to a long delay before anything appears and the page seems 'broken'.Ideally, the interval / staggering effect would only stagger items that are visible on-screen. If there are no elements on-screen currently being revealed (actively animating), then the interval should be reset to zero. The on-screen elements would then start animating in immediately, with the interval incrementing only from the first visible element.