Closed Wouter125 closed 6 years ago
Executing the same code in a playground is working fine by the way, so it's something in the compile phase that's causing the issue I think...
Hey @Wouter125, thanks for the detail in your report.
If ScrollReveal is successfully initializing your DOM, a lot has already gone right. Plus, you mentioned the same ScrollReveal code works in isolation.
My hunch says the event listeners are being bound to the wrong element. Are you using a scrolling "container" element, instead of the window? If so, we must tell ScrollReveal about it, e.g:
ScrollReveal({ container: '.my-scrollable-div' });
I'm seeing "swiper" and "barba" 3rd party libraries that seem suspicious in this regard.
Yea, barba is using the history push API for navigating around, so that might cause the container to be wrong since not everything is being reloaded, let me investigate that a bit further. Good catch. Will update as soon as I figured some more.
Swiper shouldn't really be the issue I combined them earlier on already and then it worked!
Okay, so the issue wasn't in any of the javascript. ScrollReveal doesn't work as soon as you have an overflow-x: hidden;
on the body / html tag. The same goes for position: sticky
, so I thought my try that out. Anyway I think more people might run into this, so now there is a solution.
Might be useful to add this to the documentation of v4? Just an idea!
Sounds like we’ve been chasing #379
I believe overflow-x: hidden
on the <body>
should still be okay, but doing so on <html>
with height: 100%
removes the ability to read accurate scroll values on the window. (It only returns 0
)
Aah yes! Missed that issue. Would this still be something to be included into the docs for v4? Also I think we can close this issue as soon as you reply. Thank you for your time and help!
Adding to the docs sounds like a good idea. I'm also thinking maybe ScrollReveal should check for the two offending styles on <html>
during instantiation? Thanks for the inspiration.
Hi,
I recently embedded ScrollReveal 4 beta 32 into my portfolio but I'm having a hard time to get it to run.
I'm using Webpack 4.14.0 on OSX Mojave together with Safari 12 and Firefox 62.0b9. In both browsers I'm having the same issue.
ScrollReveal seems to be working fine, the HTML is being prepared (sr class and height added, data-sr class is being setup with the correct values). The only thing is, when I start scrolling and the object should reveal not one animation is being loaded and the data-sr values remain the same throughout.
I tried to setup ScrollReveal as simple as possible by doing the following:
When inspecting my
bundle.js
ScrollReveal is being loaded before my code is, so that's fine. Also the initialise only starts when the DOM content is ready.Furthermore, I checked the differences in the original file and my compiled file and no weird things are going on (see here). My node_modules are also excluded from Babel so it shouldn't transpile anything.
I'm kinda running out of ideas on how to solve this issue, so any help is appreciated. For my complete code you can checkout the following repo.