Jump to content
GreenSock

kharm

Get window.scrollY value while tweening

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi, I'm an old fan of TweenMax in AS, so happy to see this library ported to Javascript.. :)

 

I've a question regarding performance optimization in my website, is there a way to get window.scrollY property while we are tweening with TweenMax scrollTo Plugin?

[ I need to use it inside onUpdate function ]

 

I've read several articles that accessing window.scrollY value will cause document reflow in the browser. So, I thought it would be good if I can get the current tweening value, without accessing window.scrollY property.

* http://www.html5rocks.com/en/tutorials/speed/animations/

 

Thanks.

Link to comment
Share on other sites

I don't see any suggestions in that article that reading window.scrollY would cause a reflow/layout? I just did a test in Chrome with

TweenLite.to(window, 10, { scrollTo:500, onUpdate:function() { console.log(window.scrollY) } });

- got up-to-date window.scrollY values every update, and not a single layout occurred.

  • Like 1
Link to comment
Share on other sites

Hi, Jamie,

In the optimization part, the article tells us,

// first loop is going to do all
// the reflows (since we use offsetTop)
    for(var m = 0; m < movers.length; m++) {

        mover       = movers[m];
        moverTop[m] = mover.offsetTop;

Even 'it can't be seen', document reflow occurs when we get offsetTop property ( CMIIW ).

 

And referring to this one [ reference from that article ] : http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html

Reading window.scrollY value will also trigger browser reflow, which means unnecessary if we can get instant access to the current tween value.

Link to comment
Share on other sites

*update*

 

I have try to simulate the calculation by using tween.progress() to get the current tweening value, but the cost seems even higher than using window.scrollY itself.

[ roughly observed in chrome timeline ]

 

here is my code :

TweenMax.to( window, 0.3, {
        scrollTo : { x:0, y : slideTo },
        onUpdate : function ( _pageContainer, tween, initial, deltaY ) {
                _pageContainer.updatePositionData( initial + tween.progress() * ( deltaY ) );
        },
        onUpdateParams : [ this, '{self}', initial, slideTo - initial ],
        ease : Power1.easeOut
} );

Sorry, if it's "insignificant problem", I'm just curious if it's possible to get the tweenmax calculated value in the update event.

Link to comment
Share on other sites

I wasn't saying I "didn't see" reflow; I monitored the events in the Chrome Developer Tools, and there literally was no layout (called reflow by Mozilla) triggered by accessing window.scrollY during that scrollTo tween.

 

Layout does not occur every single time you try to access one of those values, they just require layout to be up to date. If it's not, sure there will be a layout event, but at least in my quick test, tweening the window scroll is not enough to dirty the layout every frame.

 

Please don't think I'm trying to brush you off. I can see value in what you're after, I just don't have a good solution for you at the moment (although what you've set up seems quite ok - it really shouldn't be costly at all...). There are some internal values stored at tween._propLookup.scrollTo which you might be able to leverage, but I would be cautious doing so. It's an undocumented private use object, so there's always the possibility it could be modified in a GSAP update, breaking your code.

  • Like 1
Link to comment
Share on other sites

Thanks Jamie, :)

 

I'm new to know about this reflow/repaint method. And all the information I know is based on article with several shallow experiment. I don't even know how to read/observe the reflow event in Chrome Dev Tools, before. Made me a bit unsure to understood your first comment about not a single layout occurred, sorry.

 

Seems the tween._propLookup.scrollTo is the thing I'm looking for, even unfortunately it's private object.

 

Anyway I'm using window.pageYOffset right now as recommended in this article https://gist.github.com/Warry/4254579 [ 'Beware of reflows' section ] and it's not included in the http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html list, eventhough I haven't found any difference with window.scrollY in my current observation.

Link to comment
Share on other sites

Link to comment
Share on other sites

Okay, thanks for the reference jonathan, :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×