jlmakes / jlmakes/scrollreveal
The interval option should only stagger visible elements
- Dominant language
- JavaScript
- Stars
- 22.5k
- Forks
- 2.2k
- PR merge metrics
- No merged PRs in 30d
Description
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.
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.