Tween Timline Progress

[renholder57]

Hello

 

Does anyone know of a way to tween/animate the updating of the progress attribute? Right now it seems to just jump to that point.

 

I'm currently using: myTimline.progress(myProgress);

 

Thanks

[Rodrigo]

Hi and welcome to the forums,

 

Sure Greensock can handle any numeric value you throw at it so you can easily tween it.

 

In this case you have to create an object and add a key:value pair, tween the value of that object and with an onUpdate callback pass that value as the timeline progress, something like this:

var tl1 = new TimelineMax({paused:true}),
      tl1Prog = {a:0};

TweenMax.to(tl1Prog, 1, {a:1, onUpdate:updateFn});

function updateFn()
{
     tl1.progress(tl1Prog.a);
}

Remember that the progress is between 0 and 1, and also keep in mind that you could add easing functions to the tween that changes the value.

 

Hope this helps.

Cheers,

Rodrigo.

[Carl]

Hi renholder, welcome to the GreenSock forums.

 

Yup, Rodrigo's way will totally work (thanks R) but you can actually tween a timeline's progress directly like so

 

var tl = new TimelineLite();    tl.to("#box1", 5, {left:400})  .to("#box2", 5, {left:400})  .to("#box3", 5, {left:400});TweenLite.to(tl, 1, {progress:1, ease:Bounce.easeOut});

Here is an example:

 

See the Pen 9230f9e98a52e7d6267e7052c7c668c2 by GreenSock (@GreenSock) on CodePen

 

It is a very powerful technique. Equally handy is tweening the timeScale()

 

TweenLite.to(tl, 1, {timeScale:0});

[GreenSock]

Yep, Carl is right on - Also keep in mind that TimelineMax has tweenTo() and tweenFromTo() methods that allow you to just tell it to tween to a particular time or label, and you can even pass special properties like an onComplete or ease or whatever...

 

 

//tweens from wherever the timeline is now to exactly the 5-second spot, and then calls myFunction()
timeline.tweenTo( 5, {onComplete:myFunction});

There are some other options too, but I don't want to overwhelm you

[renholder57]

Thanks for the great responses everyone. I'll look into all these options.

[Shaun Gorneau]

@carl schooff: This is exactly what I have been looking for! But, I can seem to fiure out just how I should use it in my situation.

 

I have a Timeline created to contain a bunch of Tween.to inserts and that alone works wonderfully. The timeline is paused by default and I'm using the mousewheel event's delta to affect the current scroll position (that is the css "top" value of a container with a wrapper set to overflow:hidden). This new value (scrollPos) divided by the total (scrollHeight) gives me a timeline progress position to move to ( value between 0 and 1) using myTimeline.progress(prog);. In OS X, this looks fantastic due to the OS wide inertia scrolling in combination with "swipe" scrolling. That intertia continues to fire the mousewheel event with decreasing delta value resulting in a very nice ease out. But, when maintaining "touch" of the trackpad/mouse during the mousewheel, you get a very linear movement. And, of course, no amount of easing happens with intertia scrolling off or in Windows. 

 

Now, using the method above instead -- TweenLite.to(myTimeline, 1, {progress:prog, ease:Strong.easeInOut}); -- yields a very nice easing motion in response to the mousewheel delta when intertia scrolling is off and in Windows browser's ... but it appears to delay until the last delta is calculated meaning the TweenTo doesn't begin until the final delta is fetched (technically, I don't know what is happening but that is the best I can describe it).

 

What I'm looking to do is a hybrid of the two. Basically what I'm looking to do is this

- Mousewheel movement that allows the timeline progress to ease into position but that provides close to realtime response at start and move.

 

Does anyone know how I can accomplish this?

[Carl]

I don't know why you are getting that delay in Window's browsers, but perhaps this example here will give you an idea of how to handle the mousewheel events:

 

http://forums.greensock.com/topic/7327-custom-mousewheel-scroll-with-scrollto-plugin/

 

That example just tweens the position of an element, but if the response is accurate on your various browsers and devices, it should be fairly easy to tween your Timeline's progress with it.

 

Here's an example that uses scrolling to control a timeline:

See the Pen mbrqt by adrianparr (@adrianparr) on CodePen

 

nice inertia effect when flick-scrolling on track-pad

[Shaun Gorneau]

Thanks for the response Carl. Unfortunately, the first example demonstrates the exact result I'm trying overcome (precise linear tweening) without OS based inertia scrolling and the second example has the same delay issue I've encountered with my method.

 

Essentially, the exact mousewheel "interaction" I'm looking for can be seen here

 

https://victoriabeckham.landrover.com/US

 

I've got some direction on a project that calls for interaction and flow similar to this site, and Blast Radius hit it out of the park with this site.

 

Rather than do anything with their code, I've opted to learn (and support!) Greensock and build a concept from the ground up.

 

As a prototype (proof of concept), I'm following a similar flow to their site to gain an understanding of timing and control.

 

You can see the scrolling issue I'm having here http://www.discoverreynolds.com/concepts/discoverreynolds/index.html

 

Basically, it's waiting until I have stopped using the mouse wheel before the tween kicks in.

 

Side note: all I'm working with right now are mousewheel and arrow keys (no scrollbar or touch)

 

Any thoughts from anyone would be much appreciated

[Carl]

First, great work on the site. I was able to see a lot of great stuff using the arrow keys.

 

I don't know if this was thrown in as a test, but the following is going to be problematic:

 

 

 

drTimeline.progress( prog );


TweenLite.to(drTimeline, 1, {progress:prog, ease:Strong.easeInOut});
 

 

if you give the timeline a progress( prog ) before the tween, the tween won't do anything as it's progress will already be the value you are attempting to tween to. 

 

I wish I had more knowledge of scroll delta issue, but as another tip, the API has been streamlined a bit recently and the insert() method has been deprecated (still supported). 

 

 

 

//old
timeline.insert( TweenLite.to( element, 1, {css:{left:300}}, 10 )

//new
timeline.to( element, 1, {left:300}, 10 )
 

 

Check the to() method in the docs to see how flexible the position parameter is. For most timeline needs its much easier to use relative insertion points than trying to manage absolute values. I think you will dig it

 

http://api.greensock.com/js/com/greensock/TimelineLite.html#to()

http://www.greensock.com/v12-api-change/

[Shaun Gorneau]

 

First, great work on the site. I was able to see a lot of great stuff using the arrow keys.

 

I don't know if this was thrown in as a test, but the following is going to be problematic:

 

drTimeline.progress( prog );
TweenLite.to(drTimeline, 1, {progress:prog, ease:Strong.easeInOut});

 

Yeah, sorry about that ... have been in there toggling between the two approaches and I forgot to comment one out 

[Shaun Gorneau]

I got it!!!

 

The problem was the easing... easeInOut

 

TweenLite.to(drTimeline, 1, {progress:prog, ease:Strong.easeInOut});

 

 

Changed to

 

TweenLite.to(drTimeline, 1, {progress:prog, ease:Strong.easeOut});

 

 

And all is good! Scrolling begins on the mousewheel event and eases into the final position!

 

Don't know why I didn't think of that before :/

[Carl]

Awesome. Thanks for the update.

Would love to see your site when its finished. Drop us a note.