Tween from percentage to percentage

[gigbig]

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...

[Carl]

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

[jamiejefferson]

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());

[gigbig]

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

 

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!