Jump to content


Multi animation onClick

Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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 :-)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.