Reveal only works on resize? #298

ambidustrious · 2016-09-28T18:35:58Z

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 · 2016-09-28T19:40:17Z

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 · 2017-06-12T16:49:30Z

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 · 2017-06-12T18:35:33Z

@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 · 2017-06-13T17:02:06Z

@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:

Angular 2
ng-scrollreveal (ScrollReveal v3.3.5)
Windows 10
Chrome, Edge and Firefox (latest)

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 · 2017-06-13T19:27:48Z

@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 · 2017-06-14T15:32:44Z

@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:

jlmakes · 2017-06-14T17:40:14Z

@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 · 2021-02-24T19:32:11Z

@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 · 2021-02-25T02:13:47Z

@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 · 2022-07-27T20:48:39Z

@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);

ambidustrious closed this as completed Sep 28, 2016

jlmakes added the Question label Oct 3, 2016

jlmakes changed the title ~~What am I missing?~~ Reveal only works on resize? Oct 3, 2016

jlmakes added Bug and removed Question labels Jun 26, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Reveal only works on resize? #298

Reveal only works on resize? #298

ambidustrious commented Sep 28, 2016 •

edited

Loading

ambidustrious commented Sep 28, 2016 •

edited by jlmakes

Loading

edoardoVD commented Jun 12, 2017 •

edited

Loading

jlmakes commented Jun 12, 2017 •

edited

Loading

edoardoVD commented Jun 13, 2017 •

edited by jlmakes

Loading

jlmakes commented Jun 13, 2017 •

edited

Loading

edoardoVD commented Jun 14, 2017 •

edited by jlmakes

Loading

jlmakes commented Jun 14, 2017

dbarrett24 commented Feb 24, 2021

jlmakes commented Feb 25, 2021

RuyVictor commented Jul 27, 2022

Reveal only works on resize? #298

Reveal only works on resize? #298

Comments

ambidustrious commented Sep 28, 2016 • edited Loading

ambidustrious commented Sep 28, 2016 • edited by jlmakes Loading

edoardoVD commented Jun 12, 2017 • edited Loading

jlmakes commented Jun 12, 2017 • edited Loading

edoardoVD commented Jun 13, 2017 • edited by jlmakes Loading

jlmakes commented Jun 13, 2017 • edited Loading

edoardoVD commented Jun 14, 2017 • edited by jlmakes Loading

jlmakes commented Jun 14, 2017

dbarrett24 commented Feb 24, 2021

jlmakes commented Feb 25, 2021

RuyVictor commented Jul 27, 2022

ambidustrious commented Sep 28, 2016 •

edited

Loading

ambidustrious commented Sep 28, 2016 •

edited by jlmakes

Loading

edoardoVD commented Jun 12, 2017 •

edited

Loading

jlmakes commented Jun 12, 2017 •

edited

Loading

edoardoVD commented Jun 13, 2017 •

edited by jlmakes

Loading

jlmakes commented Jun 13, 2017 •

edited

Loading

edoardoVD commented Jun 14, 2017 •

edited by jlmakes

Loading