el.getBoundingClientRect() causing unusual behavior [solved v3.0.1]

[fgjeremy]

We have been using Scroll Reveal for a long time now...and it's always worked with calling the data-sr tag such as data-sr="enter from top"

Looks like you changed this to now have to be set via JavaScript which is fine....However, ever since the update I have not been able to successfully get scroll reveal to work...

http://www.forthgear.com/christmas-2015/?w3tc_note=flush_all

It's very finicky...I actually have to grab my browsers corner, and resize the browser to trigger a dom refresh in order for the animations to reveal....Reset doesn't work, and the animations only work 50% of the time. I have removed other scripts, disabled the rotator and video...tried just having the scripts by itself and cannot get this to work.

I appreciate the new updates...but the old way worked flawlessly with no complications or conflicts with any script i ever put on the page. Just struggling greatly with the new updates.

[jlmakes]

@fgjeremy v3.0 is a breaking upgrade, with significant changes in strategy and almost completely new codebase.

Legacy projects that were updated to use the JavaScript API showed no issues, but these were isolated environments—If you have a large existing project running flawlessly on v2.3.2, there’s really no reason to upgrade to v3.0 unless you want to use the new JavaScript API, the new callbacks or config.viewOffset.

If you want me to take a look at your website—it would be helpful to see what it looks like running v2.3.2, and what it looks like running v3.0.

🐝

[fgjeremy]

I'm just saying in general...I cannot get it to work, even on a brand new project. That website i showed you is a brand new project...as stated none of the reveals work on scroll...i have to actually resize my browser to trigger a dom refresh in the browser. I am using google chrome.

[jlmakes]

@fgjeremy I put together a simple example, using ScrollReveal 3 hosted on jsDelivr.

There is likely a few kinks to work out with any significant refactor like this, but we need to identify what about your project is failing—because the above example shows ScrollReveal 3 working as expected, just as in my personal testing during development.

[jlmakes]

I think I‘ve found the problem @fgjeremy, and you’ve lead me to confirm a suspicion I’ve had concerning domEl.getClientBoundingRect() vs domEl.offsetTop

Look at these two examples, both using a really large animation distance.

ScrollReveal 3 —vs— ScrollReveal 2

What’s interesting is that elements that straddle this boundary in ScrollReveal 3 can be considered visible and not visible at the same time—meaning that a small resize of the window may cause it to evaluate to the opposite.

It seems that element offset is calculated pre-transformation, and that the bounding rect is calculated post-transformation… I think this is what's causing the problems in your project.

This calls for a bug fix... 🐝

[jlmakes]

@fgjeremy I made some significant changes in v3.0.1, that use an updated version of the v2.3.2 visibility engine. It should be as reliable, but now also work for horizontal scrolling.

Let me know if it works better for you!