How to achieve an "opening Animation"

[just]

Hello everyone,

first, with this beeing my first post here, i like to thank for this wonderful library and the supporting community. I've been lurking for quite a while now.

 

If you look at my codepen you will see a date and some text. When you click on it, an address will fade. Clicking it again will fade it out while moving to the right.

Clicking it again will fade the address in again coming from the right. And THIS is exactly what i want the address to do on the FIRST click.

How do I achieve this?

 

Thank you very much and have a beautiful day

just

 

P.S. Can anyone come up with a better title, please? 

See the Pen PoyQvvr by derJerg (@derJerg) on CodePen

[Rodrigo]

Hi @just and welcome to the GreenSock forums!

 

In this cases is better to just toggle a GSAP animation back and forth instead of creating a new one on each click:

See the Pen OJBvPZz by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[just]

Hello again,

I'm really sorry I didn't answer earlier. This worked totally fine and helped me to understand GSAP better.

Thank you and have a nice day

just