Mootools Fx.Scroll() giving wrong/delayed div.getScroll()

Question

I am doing a FX.Scroll() with Mootools 1.3.2 and making console.log() directly after the Fx.Scroll command.

Q: why does div.getScroll() does not get me the "after-Fx.Scroll()" value? but instead the value before the Fx.Scroll()?

(jsfiddle example here)

Answer 1

this is event-based programming. Fx.Scroll is an instance of Fx, when any animation / tweening is complete, it will fire an oncomplete event. you are currently outputting at the time of click, not after the tweening is done. since it's not a CSS3 transition, the property does not get set str away and then interpolated by the css ui thread - it is actually moving it on a point by point basis in a setTimeout (so detached from current execution scope/thread).

http://jsfiddle.net/2WuSw/1/

scrollEff = new Fx.Scroll(spinAreaDiv, {
    wait: false,
    duration: 1000,
    offset: {
        'x': 0,
            'y': 0
    },
    transition: Fx.Transitions.Quad.easeInOut,
    onComplete: function(){
        console.log(this.element.getScroll().x);
    }
});

as you can see above, I am passing an onComplete event handler.

you can also late-bind later.

// or use `complete:once`
scrollEff.addEvent('complete', function(){
    console.log(this.element.getScroll().x);
});