Multi animation onClick

[acipriani]

Hi everyone,

I have to create pages that have 4 animations each that can be activated at the click of 4 focus points that I inserted in an svg image, the animation hides the initial text and makes the text of each focus point appear, for the first I managed the problem occurs when I have to animate the others, who have to hide both the initial text and the contents of the other focuses already seen by the user.

In practice, if I click 1 it hides 2,3,4 and the initial text, if I click 2, it hides 1,3,4 and so on.

I gathered to also set the reverse function so that if I double click on a focus point the initial text reappears, but when I go to add the others everything overlaps.

Do you have any suggestions, I mainly used #IDs maybe I need to organize better in classes ??

See the Pen xxRGjQg by magiaslab (@magiaslab) on CodePen

[ZachSaucier]

Hey acipriani. This is just a matter of getting your logic correct  Most likely it'd be easiest to just reverse all of your timelines when any button is clicked and then play the one that needs to be played.

 

You need to decide: do you want the previous animation to finish reversing before starting the next (new) animation? If so, you might use the onReverseComplete callback of that timeline to play the next one. It might also be helpful to use a variable to keep track of which one is clicked so that if someone has section 1 open, clicks on section 2, then clicks on section 2 again before the reverse of section 1 finishes you don't open section 2 in that case.

 

If you have a specific question about GSAP feel free to ask and we'll do our best to help.

[acipriani]

Yes, the thing that deceives me is the initial text which is a third variable, however now I try to review the logic !! Thank you