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

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

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});`
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());
```
Share on other sites

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!