CODEWITHSUNDEEP
javascriptgsap
tomsseisums
tomsseisums

Reputation: 13377

Playing animation to a specific time

I am creating a backend for animating a progress bar.

// Default easing.
TweenLite.defaultEase = Power0.easeNone;

// Timeline.
var tl = new TimelineLite({
    onUpdate : function()
    {
        console.log(progress.progress);
    }
});

// Initial state.
var progress = { progress : 0 };

// Finalized state.
tl.to(progress, 1, { progress : 100 });

// The length of the animation.
tl.totalDuration(15);

// Play.
tl.play();

This works as expected, but is there a way to animate from current playhead to a specific one? Something like tl.playTo(0.5) and afterwards tl.playTo(0.2) that would revert to 20%.

I am aware of seek, progress and the optional variable for play methods, but they only let me specify the starting position, not the end position.

How do I achieve such behavior?

Upvotes: 0

Views: 323

Answers (1)

Tahir Ahmed
Tahir Ahmed

Reputation: 5737

If I understand your question correctly, here is what I propose.

You can animate the progress property of TimelineLite. Something like:

TweenLite.to(tl, 1, {progress: .5, ease: Linear.easeNone});.

Also, have you seen tweenTo() and tweenFromTo that are available in TimelineMax and I know that you are using TimelineLite but I am still wondering if you were aware of them.

Does this help?

Upvotes: 1

Related Questions