jlmakes / jlmakes/scrollreveal

The interval option should only stagger visible elements

Open
#573 0 comments 0 reactions 0 assignees View on GitHub
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.