Jump to content
Search Community

Replay After Return to Start

bichant test
Moderator Tag

Recommended Posts

So I have this box that changes colors by clicking the 'Change Color' button. That  works perfectly thanks to help from Jack.


Next, you click the 'Change Mode' button and it fades out. Click that button again and it fades back in. I also need it to stop at whatever point it is at during a fade in/out.


The problem I am having is that it only cycles through once. It gets back to the beginning and won't play again.


I have tried different Methods from GreenSock Docks. some, such as restart, allow it to play again but take it back to the beginning when you try to pause it during a fade.


The code that toggles the fade back and forth is based on Carl's  excellent course and an old GSAP post.


Thanks in advance!

See the Pen QWwRNya by bichant (@bichant) on CodePen

Link to comment
Share on other sites

Hey bichant.


This is because your animation gets stuck in reversed mode. You don't have anything telling it to switch back to playing forwards.


The general way to handle this is to check the reversed() state instead of the progress and play forwards or backwards depending on the value. Meaning:

function fadeInOut(){
  // If reversed, play forwards. If not, play in reverse.
  fade.reversed() ? fade.play() : fade.reverse();

Make sure you set reversed: true on the tween initially if you use this approach though (so it plays correctly the first time). 


In the demo below I also shortened your event listener (you can just pass the function reference, no need for an arrow function) and added paused: true to the tween instead of using the .paused() method.

See the Pen ExjxEWO?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 1
Link to comment
Share on other sites

Ah, I understand what you mean now. You want:

  1. The button to play/pause the tween.
  2. The tween to stop playing if it completes and reverse completes. (this is the default behavior of tweens/timelines)
  3. The tween to reverse its current direction if it's at the "end" of the animation or the start of it.

It's helpful if you provide that list at the start :) 


Once you have the logic stated clearly like that, the code can match:

function fadeInOut() {
  if(fade.progress() === 1) {
  } else if (fade.progress() === 0) {


P.S. It's good to fork CodePens that used in a thread when you edit them so that the thread can still be useful to other people who come across is in the future :) 

  • Thanks 1
Link to comment
Share on other sites

That's It!

Thank you for your help and thank you for your patience. I tried to make clear what I need at the beginning. Obviously I did not do a very good job.


By the way, I almost got this right. I used else, instead of else if, in my statement. That's why I'm a newb.

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...