Update scrollOffset and scrollDuration on the fly? #35

Closed
damongolding opened this Issue Apr 6, 2013 · 13 comments

Comments

Projects
None yet
5 participants

Is it possible to do that?

My offset and duration is set by the width and height of the window, which works fine. Until the user resizes the browser, which means the offset and duration are now wrong.

At the moment I am calling a function with adds the tweens again but with the new prams. It seems to be working ok, though sometimes the positioning is a little off. I just wondered if this was the correct way of doing it? Is it updating the original instance, or creating new ones?

Collaborator

janpaepke commented Apr 8, 2013

Hi Damon,

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

regards,
Jan

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

Collaborator

janpaepke commented Apr 8, 2013

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

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

Collaborator

janpaepke commented Apr 8, 2013

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

@ghost ghost assigned janpaepke May 13, 2013

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

Collaborator

janpaepke commented Jul 9, 2013

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

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

Collaborator

janpaepke commented Sep 27, 2013

Good news, everyone! :)

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

regards,
Jan

inamine commented Nov 1, 2013

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!

Collaborator

janpaepke commented Nov 1, 2013

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 commented Nov 1, 2013

Thanks a lot!

Regards

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;
};

@janpaepke janpaepke closed this Feb 12, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment