Jump to content


(beginner) tween.play() clarification

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

Hi!  I am jumping into GSAP and loving it!  I hope you won't mind this super simple beginner question...


I am only a couple days in and most things are making sense, but I must have the concept wrong in my example pen.  My expectation was that my tween "position 1" would animate to my x location. Then after animating "position 2" it would go to that position.  All that works as expected.  My assumption was that it I hit "position 1" after that, my object would tween to the same position as the first tap of that button.  It just jumps to that position instead of animating. 


I am sure there is something super simple I am missing (maybe shouldn't be using .play() or other?) and would appreciate a quick explanation from someone.  I should also state that I do not want to use Timeline sequencing as I am looking for interactive tween solutions.  Thank you!

See the Pen gNyELM by haukeg (@haukeg) on CodePen

Link to comment
Share on other sites

Hi @haukeg,


Please look in the docs:


//begins playing from wherever the playhead currently is:
//begins playing from exactly 2-seconds into the animation:

// for your case - begins playing from start:

// or use:


Happy tweening ...



Link to comment
Share on other sites

Thank you @mikel for your response!  I have reviewed the documentation quite a bit, and unfortunately .play(0) and .restart() are not the outcome I am looking for.  If I use of those methods, the animation goes back to x: 0 before animating to position 1.  What I am aiming for is to get the box to animate from position 2 (x:350) to position 1 (x: 750) on my second tap of the position 1 button.  I guess I should say I want to know if it is possible to create tweens that go from wherever the object is to a specific destination when the tween is run?


Sorry if I did not make that clear in my original post.  Thanks again.

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Excellent, thanks!  I had not looked at the .invalidate() method yet, appreciate the pointer @mikel!

  • Like 1
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.