Update scrollOffset and scrollDuration on the fly?

[johnpolacek]

Update scrollOffset and scrollDuration on the fly?

[janpaepke]

Hi Damon,

are you talking about pins or regular animations?
With pins it's possible, with animation not yet.

regards,
Jan

[damongolding]

Hi Jan,

Forgot to mention that, yes it's for a animation. I saw it was possible for pins. So by "not yet" I assume that you are going to include this in SuperScrollorama?

Damon

[janpaepke]

Hi Damon,

yes, to my mind it is useful for the same reasons I included the updatePin method.
To be honest the reason why I didn't build an updateTween method yet is because I didn't need it ;-).
We'll see, when John or I get around to implementing this...

regards,
Jan

[damongolding]

With responsive sites becoming the norm I think it would be a good addition <= this being the reason I need it :p

Though I see it's not 'essential' as most people don't resize their browser, apart from inquisitive developers..

But all the same, I dont want my site to break if they choose to do so.

Thanx for replying,
Damon

[janpaepke]

Hi Damon,

If It's solely a vertical positioning issue you should try to work with percentages as left position values.
I'll let you know once I got around to implement the updateTween method.

regards,
Jan

[jlevinsohn31]

+1 for this functionality. Running into the same thing and I'm already using percentages for top and left position values. Any update?

[janpaepke]

Hi jlevinsohn,

actually I am sorry that I have made no progress in this regard. I just came back from my honeymoon and am quite busy now. I might get around to do it his month, but no promises. :-/

regards,
Jan

[jlevinsohn31]

Thanks for writing back, Jan. I really appreciate the update.

[janpaepke]

Good news, everyone! :)

A solution might be near! Check it out: #94

regards,
Jan

[inamine]

Hi Jan,

First of all, thanks for your amazing plugin. :)

You said above that's possible to Update scrollOffset and scrollDuration on the fly for pinned elements, could you please show some example?

Thanks!

[janpaepke]

Hi inamine,

Do you mean for Superscrollorama or for ScrollMagic?
For Superscrollorama you can find an example on the Demo Page.
(see the updatePin method).
For ScrollMagic I didn't get around yet to make any examples or demos, because it is still in development.
But it's a lot more intuitive than Superscrollorama in regard to runtime updates.
Basically you initiate like this:

var controller = new ScrollMagic();
var scene = controller.addScene("#trigger", {duration: 400, offset: -200})
                      .pin("#pinelement");

and then at any point in time you can do this:

scene.duration(600);

or this:

scene.offset(-100);

hope this helps!
best regards,
J

[inamine]

Thanks a lot!

Regards

[jcampbell05]

If you tweaked this function to accept an object and then to push that object to the array of tween like it sort of does under the hood. Then in theory if you kept a reference to that object around, you could change the offset on a resize and the tween would auto update.

I would imagine you would also need to invoke some sort of auto update function as well, nasty but it would work

// PUBLIC FUNCTIONS
superscrollorama.addTween = function(target, tween, dur, offset, reverse) {

    tween.pause();

    animObjects.push({
        target:target,
        tween: tween,
        offset: offset || 0,
        dur: dur || 0,
        reverse: (typeof reverse !== "undefined") ? reverse : superscrollorama.settings.reverse, // determine if reverse animation has been disabled
        state:'BEFORE'
    });

    return superscrollorama;
};