The interval option should only stagger visible elements

[trijammer]

If we have lots of elements being revealed, the interval option 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 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.