Jump to content
Search Community

Overwrite tween + restart tween from it's current value

vm6ej04 test
Moderator Tag

Go to solution Solved by Carl,

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

Hello GSAP forum! This is my first thread, hope I post it within the rules around here.

I've been using GSAP for quite a while now, but there are still a lot of aspects that I couldn't comfortably say I've figured them all out. Such as overwrite, invalidate, restart, stop, seek and so on...

 

I've been reading docs, search on Google, forum post etc, I still can't figure out the most simple things.

 

Question:

In the codepen sample, what should I do so whenever I click on buttons the line goes to left or right from wherever it is when the button is clicked. Multiple times. I seriously couldn't figure it out. Any help would be appreciated. Thank you

 

 

See the Pen vggROm by vm6ej04 (@vm6ej04) on CodePen

Link to comment
Share on other sites

  • Solution

Hi and welcome to the forums,

 

Great job on the demo. Big help.

 

The solution for this type of problem is to just use one tween and play() and reverse() it.

In the demo below notice that I paused it at a progres(0.5) (halfway) to start

 

var tween = TweenLite.to("#box", 5, {left:"100%", ease:Linear.easeNone});
tween.pause().progress(0.5)//stop halfway in middle




$('.play1').on('click',function(){
  tween.reverse();
});


$('.play2').on('click',function(){
    tween.play();
});

https://codepen.io/GreenSock/pen/aJYYPR?editors=0010

 

Its very difficult to manage 2 tweens on the same object like you have set up.

Each animation you create needs to record its starting and ending values the first time it plays. 

 

When using to() tweens, the start value is whatever the value happens to be when the tween first plays.

 

In your demo if you hit the left button first, tween1 plays and its tween gets these values

 

Tween1 values (move left)

start value = left:50%

end value = left:0%

 

after that tween finishes if you hit the right button tween2's tween becomes

 

Tween2  values (move right)

start value = left:0%;

end value = left:100%

 

If you let tween 2 play all the way through so that left gets to 100% and try to go back to the left:0  by telling Tween1 to restart again you will have a problem because tween1's starting left value is 0% and the current value is 100%

 

So in order for tween1 to get a new start value, you would have to invalidate() it and restart() it.

 

Open this demo: https://codepen.io/GreenSock/pen/VpXXJo?editors=1010 and go through the following routine:

 

Press left and let play all the way through

Press right and let play all the way through

Press left and let play all the way through

 

YAY! it works... sort of

 

However, when you invalidate a tween, you still have the same duration. So even though we can set new start values and avoid any unsightly jumps the duration becomes an issue if you switch directions while an animation is still playing.

 

RE-RUN the same demo.

 

press left button.

When the line gets about 100px from the 0 position hit the right button

quickly hit the left button

 

You will see it takes 5 seconds now for the line to go back to the 0 position and travel roughly 100px. uh oh. So even though you are smoothly changing direction, the timing is going to be way off.

 

Another problem with trying to use 2 tweens in different directions on the same object is that you will face an overwrite situation. As soon as you change direction mid-tween, the currently running tween will be overwritten by the new tween and killed, never to be played again. To avoid this in the invalidate() demo I also called pause on the other tween.

 

I'm sure it could be explained better, but hopefully you can see that one tween is a much easier way to go about it.

  • Like 4
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.
×
×
  • Create New...