Seemingly random CSS changes after animation completion

[Sgouws]

I've just started learning GSAP and have put together a basic slider with some animated text.

The intention is to have the text animation play on page load, reverse when a slide is changed and then re-animate onto the new slide.

 

I'm having 2 issues:

1. When navigating forwards and then backwards. The animation plays on slide 1, but both the heading and subheading have their CSS properties changed after about 2 seconds and are then invisible. There appears to be no reason for this. To replicate, navigate to forward to slide 2, then back to slide 1, wait 2 seconds.

2. There are increasing delays between the slide changes. Moving from slide 1 to 2, takes x seconds, but moving from 2 to 3 is exponentially longer. This wait increases as the slides progress.

 

I know my JS isn't perfect, but this is the solution I've come up with.

 

Any help would be greatly appreciated!

See the Pen jOpypWL by Sgouws (@Sgouws) on CodePen

[GreenSock]

Welcome to the forums, @Sgouws.

 

I noticed several problems: 

1. You keep adding tweens to the same timeline over and over again (and never clear out the old ones), so your timeline is getting longer and longer. When you reverse, it's going backwards over the previous stuff too. You do not need to keep reusing the same one - you can create a new one each time if you'd like. Or .clear() the old one. 
2. You've got logic issues. Be very careful with .from() tweens because I see people get bitten by logic problems a lot with those. Remember that those use the CURRENT values as the destination, so be mindful of what those would be. For example, let's say you're animating from() opacity: 0. Well, the first time that runs it's fine, but what happens if the user clicks multiple times quickly, so it creates ANOTHER .from() tween when the first one is only halfway done. OOPS. The opacity may be 0.5 at this point, so that becomes the destination value. It'll LOOK like your tween broke because it ends at opacity: 0.5 instead of 1, but GSAP is doing exactly what you told it to do. In your demo, you are creating exit animations that leave your elements invisible...and then you're creating subsequent .from() tweens, so it'll end up in that invisible state. You might want to use .fromTo() tweens or to() tweens to make sure you have total control over the end values.
3. You're using the old v2 syntax in some places, like "new TimelineMax()" - there's no need for TweenMax/TweenLite/TimelineMax/TimelineLite anymore. Just use gsap.timeline(), for example. 
4. You don't need to use autoAlpha and opacity. When you do autoAlpha, it is exactly the same thing as opacity but it also toggles visibility to hidden when the value gets to 0. 

I imagine you wanted something more like this, right?: 

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

[Sgouws]

Jack, 

 

I cannot thank you enough! Super thorough and helpful explanation. Thank you for taking the time and for laying it all out!

You not only fixed all my issues entirely, but helped me avoid the same issues going forward!

I'm loving GASP!

 

Have yourself a great day!

 

-Stephen