Question: dynamically binding/unbinding SuperScrollorama tweens?

[benjaminallison]

I'm using SuperScrollorama on a responsive site, and am trying to bind/unbind tweens dynamically, based on browser width, while also resetting tweened element to their default styles. I thought I could do something like this:

calcSizes = function() {
    controller.addTween( '#panel', TweenMax.to( $('#panel h1'), .5, {css:{top: 0 }}), 0, 50);
    if ( viewport().width >= '720' ) {
        controller.removeTween( '#panel' );
    }
}

$(window).resize(function(){
    calcSizes();
});

Of course, this isn't particularly elegant, and doesn't work. What's the best approach?

[janpaepke]

Hi Benjamin,

if it's only basic values you want to animate I suggest you tween an random object's value and then do the actual update in an "onUpdate" function.

this would work a bit like this [untested code]:

var
    myObject = {prop: $('#panel h1').position().top}, // start val of tween
    tween = TweenMax.to(myObject, 1, {prop: 0}, onUpdate: function () {
        if ( viewport().width < 720 ) {
            $('#panel h1').css("top", myObject.prop);
        } else {
            // bla
        }
    });

controller.addTween('#panel', tween, 0, 50);

make sure to have only minimum cpu needy functions in the onUpdate, for performance reasons.

hope this helps,
regards,
Jan

[benjaminallison]

Thanks for replying so fast! I'll give it a shot!

[janpaepke]

Allright :)

let us know if it works...