svg Collapse SVG tile onclick

[Melvin]

Hello there,

 

I'm currently working on a SVG infographic (my first GreenSock project), and I have a little problem. When I click on a tile, it will perfectly slide out of the pie chart. However it only slides back in when I click on another tile that isn't open. But I also want it to close.

 

For example:

Click Tile 1 -> Opens

Click Tile 1-> Closes

 

Now it only does this:

Click Tile 1 -> Opens

Click Tile 1 -> Nothing

 

 

How can I fix this?

 

 

 

See the Pen VMKpLV by anon (@anon) on CodePen

[Carl]

Hi and welcome to the GreenSock forums,

 

Thanks for the demo. It seems the issue really isn't a GSAP issue but a logic issue that needs to be solved and the difficulty of implementing that is compounded by the amount of repetitive code you are using. I understand you can only code to your current ability but I'm just not sure I can find a practical solution with the way you have things currently set up.

 

It seems like each piece of the pie has virtually identical animations. The only thing that changes is really the CSS selectors you use to target the things that are animating. In cases like this you can just make a function that takes in a parameter for the parent CSS selector:

 

Study this demo and see how one createPanel() function is used to build 3 different timelines (one for each panel):

See the Pen 457937b91f05262a85a49145e7c8da32 by GreenSock (@GreenSock) on CodePen

 

A resource is coming soon that will describe everything that is happening in that demo (stay tuned).

 

That technique does not solve your interactivity logic but it should help you cut down on the amount of animation code you are writing, perhaps if not now but in the near future.

 

There are many different ways to get an item to "open and close".. what you are doing is a bit complex actually as you need 3 different things to possibly happen on a click:

 

1: the first time you click on anything (no other item has been clicked) only open the thing you clicked on.

2: if you click on an item and another item is already open, then close the item that is open and open the item you clicked on

3: if you click on an open item, only close it

4. every time you click on something, keep track of it as the "currentAnimation" (or maybe "active" in your case) so that you can close it when you click something else.

 

The code to handle all that logic can be a bit of a nightmare for anyone to read or write (as you will see in the simple demo below).

 

The demo below assigns each box a single timeline animation. The basic idea is that whenever a box is clicked you reverse() the current direction of its animation. So if it is playing forward and you click, it will get reversed. If it is already reversed and you click, it will play forward. The code to toggle an animation's reversed() state looks like

animation.reversed(!animation.reversed) // set reversed state to the inverse (opposite) of its current value

 

The demo below is not provide as a direct solution to your current problem, but an example of how you can have 10 things do basically the same thing without re-writing 10 big blocks of code:

 

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

 

There are smarter, more object-oriented ways to approach these types of problems, but unfortunately I can't get into the details of all that. 

There are probably other pros around here that can give you some other examples or perhaps help you re-factor your code. 

 

 

 

 

 

[mikel]

Hi @Melvin,

 

you can use the individual data (I set them into your SVG) as var  and tween the OUT-tile back - as here:

 

See the Pen WZGMeE by mikeK (@mikeK) on CodePen

 

There is no need for a new class. Just tween all back (= .theme):

 

See the Pen JrRQdX by mikeK (@mikeK) on CodePen

Happy tweening ...

 

Mikel