Reverse animation not working using one single button

[Acrylate94]

Hello,

I want that the "click here" link toggles the animation, but after clicking it once, the reverse animation is not working. I'm not sure what I am doing wrong, thank you!

 

See the Pen eYgJeKa by robby32 (@robby32) on CodePen

[PointC]

Hi @Acrylate94 

 

Welcome to the forum.

 

Is this what you need?

See the Pen 86bb327a7c7d6179e77875c33bba62f7 by PointC (@PointC) on CodePen

 

Happy tweening.

 

 

 

[akapowl]

 

On a sidenote:

 

You are missing the closing '>' bracket on your last closing tag of the div in your HTML - that broke everything for me in debug view.

 

Don't miss that in your actual page  - took me quite some time to find out what the problem was, throwing errors in console.

[Acrylate94]

9 hours ago, akapowl said:

 

On a sidenote:

 

You are missing the closing '>' bracket on your last closing tag of the div in your HTML - that broke everything for me in debug view.

 

Don't miss that in your actual page  - took me quite some time to find out what the problem was, throwing errors in console.

Hi! i'm sorry but im not sure what div are you talking about, it seems fine to me!

[Acrylate94]

9 hours ago, PointC said:

Hi @Acrylate94 

 

Welcome to the forum.

 

Is this what you need?

 

 

 

Happy tweening.

 

 

 

Thank you very much it worked on my js! Even though i cannot compile from typescript because "this.anim"  ("property 'anim' does not exist on type HTMLElement").
I also have another question, how can i prevent to bug the animation triggered by clicking multiple times?

Thank you!

[akapowl]

44 minutes ago, Acrylate94 said:

Hi! i'm sorry but im not sure what div are you talking about, it seems fine to me!

 

Your .main-container div. The missing closing-bracket causes the first of the two scripts you include (which is GSAP) to not be loaded in debug view - thus there was no GSAP. This exact issue likely only happens with the codepen - but might cause other problems on your page if you missed it.

 

 

 

40 minutes ago, Acrylate94 said:

I also have another question, how can i prevent to bug the animation triggered by clicking multiple times?

 

Best would be to not create the timeline on every click but instead beforehand for each element neccessary (like with a .each()-loop for example) and set your timeline to be paused initially - then on click of this element only change the playstate of the timeline.

 

See the Pen fa40fa5d90e014eb95075b05b6ae6d03 by akapowl (@akapowl) on CodePen

 

 

[Acrylate94]

21 minutes ago, akapowl said:

 

Your .main-container div. The missing closing-bracket causes the first of the two scripts you include (which is GSAP) to not be loaded in debug view - thus there was no GSAP. This exact issue likely only happens with the codepen - but might cause other problems on your page if you missed it.

 

 

 

 

Best would be to not create the timeline on every click but instead beforehand for each element neccessary (like with a .each()-loop for example) and set your timeline to be paused initially - then on click of this element only change the playstate of the timeline.

 

 

 

 

 

i'm sorry, i looked at the wrong codepen code! Thank you very much for the fast reply this works!