search

jlmakes / scrollreveal

Animate elements as they scroll into view.
https://scrollrevealjs.org/
22.33k stars 2.26k forks source link

Problem of resolution? #477

Closed ghost closed 5 years ago

ghost commented 5 years ago

Hello,

Here's a video illustrating my issue: https://www.youtube.com/watch?v=j_OW-lQeYP0 If you want to test the website, I host it here: https://www.beta.bovy.fr/YaliAIR/index.html

Environment

jlmakes commented 5 years ago

Hey @lionelbovy

I appreciate your patience, and the detailed issue report.

On desktop, you use the windows scrollbar... On mobile, you use the .site-content scrollbar.

So to start with you had this...

// before
sr.reveal('.card', { delay: 300, interval: 200, scale: 0.85 });

For your reveals to work on mobile, you need to specify .site-content as your option.container. (Otherwise it will listen to the wrong scroll events.) Since options.desktop and options.mobile are true by default, we can just turn off the unrelated platform for each configuration, e.g:

// Since we're reusing the same options,
// I set them here as new defaults.
ScrollReveal({ delay: 300, interval: 200, scale: 0.85 });

sr.reveal('.card', mobile: false });
sr.reveal('.card', desktop: false, container: '.site-content' });

This is one way to configure separate desktop/mobile reveals, but keep in mind, it will not work when resizing the window because options.desktop and options.mobile do not use window width—they use the device user agent. So to test things, actually load it on a mobile device.