Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tip: Use rootMargin instead of threshold #1

Open
timrosskamp opened this issue Jun 7, 2020 · 1 comment
Open

Tip: Use rootMargin instead of threshold #1

timrosskamp opened this issue Jun 7, 2020 · 1 comment
Labels

Comments

@timrosskamp
Copy link

Hey, I looked through the code and saw a potential issue.

I see you're using threshold in the Intersection observer options to trigger the animation.

This could become problematic if your element is too large. For example if your element is 10 times the height of your viewport then 10% of it could ever fit in the viewport at the same time and the Intersection Observer would never trigger if threshold is set to 0.2. When setting threshold to 0.5 this problem gets a lot more common, especially on mobile devices.

A better strategy would be to use a negative rootMargin instead. You could set rootMargin: '-20% 0 -20% 0' which would trigger the observer callback if the elements scroll 20% above the bottom of the viewport.

@mamunhpath mamunhpath added the Tips label Jun 8, 2020
@mamunhpath
Copy link
Owner

@timrosskamp thanks for the tip, I will check the issue and fix it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants