[Seemingly random CSS changes after animation completion]

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

 

 

[Seemingly random CSS changes after animation completion]

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