janpaepke / ScrollMagic

The javascript library for magical scroll interactions.
http://ScrollMagic.io
Other
14.88k stars 2.17k forks source link

Smoothing scroll by animating progress #111

Closed neatcoding closed 10 years ago

neatcoding commented 10 years ago

Hi,

I was playing with your plugin and I noticed there's no option to smooth animation. I don't mean smooth the scroll, but smooth only animation (with defined duration in pixels). Not jumping from first to last frame of short animation, but really animate it depending on scroll (not just anchor start)

I wrote a plugin that turns GSAP timeline into scrolling website for one-time use, that did smooth animation whether browser scroll was smoothened or not, you could add it as an option.

I did it by tweening (instead of changing it suddenly) progress of timeline/tween attached to scroll. First I calculated progress from scroll (e.g. 0.5 if i'm in the middle of scroll), then calculated difference of current progress (e.g. 0.4 - 0.5 = 0.1), and converted it into time that animation should last. (or you could just tween the progress for 0.3s and smoothing is ready)

(see it in action here: http://www.talentowisko.pl/podstawowa/osobistoscisko/kolumb - try to jump with scroll closer and further away)

I used math function to do this:

    time = Math.abs(prev_progress - current_progress);
    time -= 1.15;
    time *= time;
    time *= time;
    time = 2 - time;

    TweenLite.to(TL, time, {progress: current_progress, ease: Sine.easeOut});

t(x) = 2 - (x - 1.15)^2 -> https://www.google.pl/?gws_rd=ssl#q=2+-+(x+-+1.15)%5E2 it means: small progress (near 0): 0.67s of animation progress throught whole animation (1): 2s of animation

You can always alter the function (two parameters could give linear) for user to define minimal time to go through whole animation, or set it just to e.g. 0.3s for all times and leave the function - it will get much more smooth just by doing this.

TweenMax is optimized really good to use it like that. :) Maybe you should consider this change?

neatcoding commented 10 years ago

I just found options.tweenChanges :) Issue closed.