search

jlmakes / scrollreveal

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

ScrollReveal and Smooth Scroll not working? #458

Closed wizardnet972 closed 6 years ago

wizardnet972 commented 6 years ago

ScrollReveal doesn't work with transform: translate3d.

Here is example: https://codepen.io/shlomilevi/pen/aajPNg

jlmakes commented 6 years ago

The smooth-scrollbar plug-in you are using does not appear to be compatible with ScrollReveal.

Opening up the inspector on the 3rd party demo, I discovered it uses CSS Transforms (i.e. translate3D) to create the "smooth" scrolling effect. ScrollReveal relies on native scroll events, but none are firing from your Smooth Scrollbar container.

dinh-tu-fool commented 3 years ago

Any alternative solution to implement both of these?

jlmakes commented 3 years ago

@dinh-tu-fool ScrollReveal 4 uses scroll (and resize) events to trigger calls to ScrollReveal().delegate() which is the main event handler that checks element dimensions, visibility, etc. However, there's no reason you can't call delegate when and however you want.

So if your smooth scrolling library doesn't use scroll events, it's up to you to call ScrollReveal().delegate() in response to some other event triggered by your smooth scrolling implementation. And of course, make sure to set the right options.container if you're getting fancy.

haroldao commented 3 years ago

delegate ?