How to stop a tween and play another tween? Overwrite not working?

[woodrow8]

Hi everyone,

Here is what I'm expecting to happen in the Codepen:

 

1. Click the "Bezier" button to animate the red box along a bezier path

2. While that is playing, click the "Highlight" button. The bezier tween should stop and the red box should animate up to the top left corner of the green box.

3. Click the "Bezier" button again. The red box should then animate back to it's original starting position and then start on the bezier path again.

 

I thought setting overwrite:"all" would help accomplish this, but I can't get the "Highlight" button to work. If you click the "Highlight" button first then it does move the red box to the correct position, but it doesn't work if you click it second.

 

If you click the "Play Vertical" and "Play Horizontal" buttons, then the red box does box in the appropriate direction. Even if you click them in different orders, so the overwrite appears to be working there?

 

Any suggestions?

See the Pen mVWKYw by anon (@anon) on CodePen

[woodrow8]

I think I fixed it. Based on this discussion:

 

http://greensock.com/forums/topic/11473-click-event-trigger-animation/

 

it looks like you're not supposed to mix x/y and top/left attributes. By using top/left everywhere, it looks like everything works now.

 

I updated the Codepen to working code.