Jump to content


How to play to X time ?

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts



I'm wondering if there's a way to play to a given X time (timeline) ?

The only way I see I can accomplish this, is by using request animation frame and call the progress method.

I found about .gotoAndStop() but it's similar to seek and it doesn't play the animation until X value (jumps straight to X point)

I'm now going to try to see at what time the animation is and for each step check if it's X time and stop or pause the animation.

But would be much easier to have something like playTo (0 start 0.5 middle and 1 end)

Any hint is appreciated!


Link to comment
Share on other sites

Hi heldrida  :)


pls try this :


var myTween = TweenLite.to(elem, 1,{x:100 , paused:true}); // your tween or timeline

TweenLite.fromTo(myTween,1,{progress:0.5},{progress:1}) // tween from to target progress

TweenLite.fromTo(myTween,1,{time:0.5},{time:1}) // tween from to target time
  • Like 6
Link to comment
Share on other sites

@diaco thanks for replying!

I had to edit my question, noticed I didn't mention Timeline.

Ideally to work with a timeline, because I'm starting by declaring the animation, then depending on the user action I'd like to show the animation.
Let's say, that the user is selecting a size and there's an object that will animate according to the user input value / preferred size.

What I usually do is using the requestion animation frame and controlling the transition or input value in the call .progress(), so I can see it animating in any direction.

Do you know if there's a way to do it with a timeline? I guess that your solution can work for me, but I'd have to declare it everytime

Link to comment
Share on other sites

I think your solution works, sorry had to reply quickly in the console so just did a quick test, need to check it properly

TweenLite.fromTo(myTimeline, 1, { time:0 }, { time: 0.5, onComplete: function () { myTimeline.pause() } })

Did a few more tests in the console and seems to be a good solution, here's the tested code:

TweenLite.fromTo(myTimeline, 1, { time: myTimeline.progress() }, { time: 1, onComplete: function () { myTimeline.pause() } })
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.