Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
gigbig

Tween from percentage to percentage

Recommended Posts

Hi,

I have created a tween to move an object from a point A to a point B with bezier trajectory: I have to dynamically calculate the starting and ending points, that will be percentages of the whole animation.

How can I tell the tween to run from i.e. 23% to 78% of the whole animation (obviously in 78-23% of the total time)?

 

I think I have to use progress property, but maybe I am doing something wrong, because it looks like the animation runs from 23 to 78% and then to 100%.

 

I am doing like this:

var timeLine: TimelineLite = new TimelineLite();
timeLine.fromTo(item, totalTime, { x: 0, y: 0 }, { bezier: { type:"thruBasic", values: [ { x: 300, y: 200 }, { x: 500, y: 800 } ] }, ease: Linear.easeNone } );
TweenLite.fromTo(timeLine, totalTime* (0.8 - 0.5), {progress: 0.5 }, {progress: 0.8, ease: Sine.easeOut } );

I have to learn a lot about timelines...

Link to comment
Share on other sites

My guess is that you have the timeline running and also a tween running (which is tweening the progress) at the same time.

 

Try pausing the timeline

var timeLine: TimelineLite = new TimelineLite({paused:true});
Link to comment
Share on other sites

This should work if you pause the timeline first:

var timeLine: TimelineLite = new TimelineLite({ paused: true });
timeLine.fromTo(item, totalTime, { x: 0, y: 0 }, { bezier: { type:"thruBasic", values: [ { x: 300, y: 200 }, { x: 500, y: 800 } ] }, ease: Linear.easeNone } );
TweenLite.fromTo(timeLine, totalTime * (0.78 - 0.23), { progress: 0.23 }, { progress: 0.78, ease: Sine.easeOut } );

Essentially timeLine will playing along as expected, except another tween starts modifying its progress at the same time - timeLine doesn't become 'aware' it is being tweened. Once the fromTo finishes, timeLine just keeps playing as it should and continues on to 100%.

 

TimelineMax has a tweenFromTo() method that might also be useful for doing this. It knows to pause the timeline first, and would look like this:

var timeLine: TimelineMax = new TimelineMax();
timeLine.fromTo(item, totalTime, { x: 0, y: 0 }, { bezier: { type:"thruBasic", values: [ { x: 300, y: 200 }, { x: 500, y: 800 } ] }, ease: Linear.easeNone } );
timeLine.tweenFromTo(0.23 * timeLine.duration(), 0.78 * timeLine.duration());
Link to comment
Share on other sites

Ok, I wasn't stopping the tween, I missed  this detail  :oops:

 

The TimeLineMax version is great too, as I can completely exclude TweenLite and ignore the duration of the resulting tween.

 

Thank you Carl and Jamie!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×