Resizing elements on page makes scrollreveal behave erratically.

[QuietNoise]

When resizeable elements on the page resize then tags with scroll reveal that are below on the page do not reveal properly. They either reveal too late / too early (depending how the said resizeable elements resized: got smaller or got bigger) or not reveal at all (those tags which are placed on the very bottom of the page). I was hoping the ScrollReveal().sync() would fix that but no hope. Similarly destroying and rebuilding the reveals doesn't work. I believe it is a bug introduced recently because I recall it was working with sync() before on some older version.

Bug demonstration: JSBin https://jsbin.com/vilajuziji/1/edit?html,css,js,output I've found JSBin very clunky. I've created same demonstation on codepen as well just in case. https://codepen.io/RhetoricalDude/pen/KKWByoM

In the demo above you have a big blue resizeable element which gets resized when clicked. When resized you can observe that tags below demonstrate the bug as they reveal too late. In commented JS part there are 3 unsuccessful attempts to use sync() and destroy() which you can play with to see they only make things worse by making reveal stop working altogether.

Edit: This works as expected in 4.0.5. Calling ScrollReveal().sync() in 4.0.5 properly refreshes all elements controlled by scrollreveal. Sample with 4.0.5 https://codepen.io/RhetoricalDude/pen/YzZjbwG

Environment

• Operating System: Windows 10 Pro
• Browser Version: Chrome 91
• ScrollReveal Version: 4.0.9

[zhaihongbin]

I encountered the same situation when using nextjs client routing, but version 4.0.5 still doesn't work

[huskiesdev]

@jlmakes I provided 3 demos :)

[kannafay]

Hi there, I changed the page height and I use sync() have not triggered correctly