Seamless button state transitions

[teejay_hh]

Hello, I have a problem with an animation I am trying to do. I am trying to build a button which can be fed different states like error, load and done, which in return should play a specific animation seamlessly. That means the loading state goes seamlessly into the error or done state. The error state should also be able to transition into the loading state. I have created a pen to show you the structure of this mess. I probably have a problem with structuring the different timelines, but I am not sure.  I would be super happy if someone could have a look at this and point me into the right direction. 

 

Cheers Thomas
 

See the Pen KZRjRv by teejayhh (@teejayhh) on CodePen

[Carl]

Hi and welcome to the GreenSock forums,

 

Thanks for the demo.

Stuff like this where you want a bunch of different transitions on the same elements isn't always as straightforward as you might think. It can get kind of messy taking existing timelines and then trying to put them in different timelines at different times especially if you are reversing them. Once you put user interaction into the mix and let people jump to any state at any time it just gets complicated.

 

For situations like this its probably better to create your animations on the fly. In basic terms you can create functions that create animations for animating certain elements out, and certain elements in. So you might call a function that creates your "AnimateLoadingOut" timeline and then call a function that creates your AnimateErrorIn timeline. You can glue the timelines that those functions create together into a parent timeline.

 

Again, it isn't exactly easy to do or explain quickly. The article below is packed with information on the technique of using functions to create timelines.

https://css-tricks.com/writing-smarter-animation-code/

[teejay_hh]

After sleeping over it last night I came to the same conclusion, building in out animations is probably the way to go. I will fiddle around with it and see what I can come up with. Thx