Closed ghost closed 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
andoptions.mobile
do not use window width—they use the device user agent. So to test things, actually load it on a mobile device.
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