GSAP animation works only first time

[JayShukla]

Hello I'm new to GSAP animation. I add animation with jQuery it's working for the first time if you click on the " Green button " in the top right corner. I need to make the animation reverse also but when it's complete animation does not work second time. Please help Thanks.

See the Pen poEabBx by henrymanektech (@henrymanektech) on CodePen

[ZachSaucier]

Hey Jay and welcome to the GreenSock forums. 

 

You're making a lot of the most common GSAP mistakes. I highly recommend giving it a thorough read  

 

What you should do instead is create your timeline outside of your event listeners and then just use control methods inside of the event listeners like so:

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

 

Also your event listeners should not be nested within one another.

[JayShukla]

Thank you. I'll definitely check it.

[lahisir]

You also need to try connecting cssplugin. You can also use TweenMax instead of TweenLite, which already includes it. Maybe this solution will help you.

[ZachSaucier]

@lahisir No, he's using GSAP 3. GSAP 3 has CSSPlugin baked into the core by default. There is no Lite/Max flavors of GSAP 3.