search

jlmakes / scrollreveal

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

ScrollReveal and Webpack Import #448

Closed Wouter125 closed 6 years ago

Wouter125 commented 6 years ago

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:

var initializeScrollReveal = function() {
    console.log('Scroll Reveal Is Being Setup');
    window.sr = new ScrollReveal();
    sr.reveal('.RevealIt');
}

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.

Wouter125 commented 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...

jlmakes commented 6 years ago

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.

Wouter125 commented 6 years ago

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!

Wouter125 commented 6 years ago

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!

jlmakes commented 6 years ago

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)

Wouter125 commented 6 years ago

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!

jlmakes commented 6 years ago

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.