search

jlmakes / scrollreveal

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

Reveal only works on resize? #298

Closed ambidustrious closed 8 years ago

ambidustrious commented 8 years ago

I have the animation applied to one item as of now. It won't work on scroll... only if I resize the browser to make it taller? I'm sure it's something simple, but can't seem to track it down. I've also tried to remove all other scripts to check for a conflict, but that didn't help either.

ambidustrious commented 8 years ago

In case anyone is curious... it was an issue with overflow-x: hidden being assigned to the html and body tags. I changed it to overflow-x: initial and the problem was solved.

edoardoVD commented 7 years ago

Yup I had the same issue, with this overflow-x at the html, body level

@jlmakes any idea why scrollreveals stop working when this overflow-x is set to hidden ?

jlmakes commented 7 years ago

@edoardoVD If you can recreate this problem using JSBin (or similar), I will spend some time debugging it. Please be sure to specify what operating system, browser version and library version you are using.

edoardoVD commented 7 years ago

@jlmakes thanks for the offer in looking into this

Two very basic pure JS samples:

This one does NOT behave as expected: http://js.do/code/jsrtest This one does: https://jsfiddle.net/qgbajp73/

Also I'm using:

I guess it has to do on how things are rendered, or timing on when ScrollReveal executes code to start getting its container, positions, etc...

jlmakes commented 7 years ago

@edoardoVD You need body { height: 100% }, otherwise the <body> element is the entire height of the content, not the height of the window.

You can inspect your first demo, and see the body is almost 4000px tall. This causes everything to be "visible" (relative to the container) on page load, causing this issue where elements are revealed before they are scrolled to.

edoardoVD commented 7 years ago

@jlmakes thanks so much for troubleshooting this so fast, I'll look into more detail on my Angular 2 project, and see what might be causing a body height resize or other manipulation while rendering the view, while that specific CSS property is set (overflow-x: hidden)

Thank you for your time!

Just as a comment reference this is the behavior:

26942457-5ee52400-4c3f-11e7-8dc7-f96038acfdab

jlmakes commented 7 years ago

@edoardoVD I’m actually not sure what scenarios would conflict with height: 100% set on the <body>... this has come up a few times before, and I’m considering just baking the behavior into ScrollReveal (so it adds that style to the body for you).

dbarrett24 commented 3 years ago

@jlmakes Getting this same bug on the last section of my page. Only shows on window resize. I've tried height: 100% and the overflow-x: hidden fixes mentioned in this thread but with no luck.

Here is the site for reference: dave-barrett.com

jlmakes commented 3 years ago

@dbarrett24 ScrollReveal captures element sizes when initialized, and on resize. That means when you are first calling ScrollReveal() the page must have its final dimensions. (For example, after really tall images have fully loaded.)

I would try deferring when you first call ScrollReveal... or if you don't mind using currently undocumented API, you can call ScrollReveal().delegate() after your page has completed loading. (The delegate is what scroll, resize and initialization invoke under the hood.)

Either way, ScrollReveal should do what you expect once it has an accurate cache of element sizes.

RuyVictor commented 2 years ago

@jlmakes This bug is still happening, it only works when you resize the viewport, add this after the ScrollReveal() class instance.

setTimeout(() => ScrollReveal().delegate(), 100);