multiple slide panel GSAP & React

[tomsah]

Hello,

I am looking for some help again about an animation using GSAP and React,  still learning and experimenting.

 

So I have got 4 panels sliding into the screen.
Then if I click on one panel, this panel should slide more into the screen and push the other panel under itself.
(IE: so if I click on panel 3 it should push panel 1 and 2 at the same time)

 

I have 2 problems, 

1 I don't understand why only the first panel that is clicked, got the animation. after that first click, no matter which panel I clicked on, only the first panel that got clicked keep being animated. even bypassing the correct e.currentTarget ( see Codepen and the console log)

2 I am not sure how to create the animation that will push more than one panel at the same time.

 

Thank you very much in advance for the help 

Happy Tweening!!!!

See the Pen MVmQwB?editors=0011 by tomsah (@tomsah) on CodePen

[Rodrigo]

Hi,

 

There are two things that I can spot in your code.

 

First, everytime you click on a menu project you're adding instances to a timeline, therefore that instance gets longer and longer. Second you're not keeping track of the element that's currently expanded (if any). Normally when working with this type of projects, is a recommended pattern to keep track of the active element so you can unset that element as active when you either toggle that state on the element or select a new one as active. In your case if you click on project 1 that should be selected as active and start the animation. Then if you click on that element again by being the active element you can reverse the tween and unset it as the active element. Same thing if you click on another element: unset the active element, reverse the tween, set the another element as active and finally start that tween.

 

Unfortunately you caught me with little time now to create a sample or play with your codepen sample. Later I'll be able to circle back to it. In the mean time use the component's state to keep track of the current active element (you're already passing a unique id in a method so you can use that) and the element being clicked. If there's an active element and the id's are the same then just reverse the animation, clear it ( https://greensock.com/docs/TimelineLite/clear() )and set the active property to null. If there's an active element and the id's don't match, set the active to null, reverse the timeline, clear it, set the new active, create the timeline and restart it.

 

Happy Tweening!!!

[Rodrigo]

Hi,

 

Does this comes close to what you're trying to do?

 

See the Pen aYyvJv?editors=0010 by rhernando (@rhernando) on CodePen

 

[tomsah]

@Rodrigo
Sorry for the delay, of my answer.
This looks like very close to what I am trying to achieve.

this is perfect in term of opening and closing individual panels and your commenting is awesome, 

Really help to make sense of it.

 

but I am getting short of ideas on how to use GSAP  animate multiple panels as such

Quote

if I click on one panel, this panel should slide more into the screen and push the other panel under itself.
(IE: so if I click on panel 3 it should push panel 1 and 2 at the same time)

 

 

Shall I use timeline, stagger, a forEach loop? 

 

And then when you say

Quote

First, everytime you click on a menu project you're adding instances to a timeline, therefore that instance gets longer and longer. 

 

why this is happening and I think it was part of the issue of my previous post that you help me with. Could you maybe explain it to me in more details?

 

Many many thanks for all this incredible help.
Happy Tweening!!!!

 

[tomsah]

@Rodrigo
Building up on top of your answer and with a little bit of fighting, I got to this solution.
 

it seems to work but

I spotted a little bug when I clicked a few times on the panels (while animated or active) it can happen that the animation is playing twice, so the panel got way too much on left.

 

and actually, I would like for the panel to not reverse every time.
If I navigate between panels, they should update themselves.
(ie: if panel 2 is open and panel 3 is click, only panel 3 should animate or if panel 3 is open and I click on panel 2 only panel 3 should revert back.)

 

I'll try to make this happen but any tips will be great.

 

 

See the Pen MVmQwB by tomsah (@tomsah) on CodePen

 

Thanks again for your time and help.

 

[tomsah]

Hello,
After some travelling and a bunch of hours looking at it, I got this solution.
I am sure the code can be written in a more efficient and elegant way. I'll look at refactoring it soon.

I wanted to share my result, after all the help from @Rodrigo

 

See the Pen jzzMde?editors=0011 by tomsah (@tomsah) on CodePen

 

 

I still have a little issue with my closeAll function, related to playing 2 timelines in master timeline.
But ill open a new post as it is a different issue.
Many thanks, @Rodrigo  any feedback will be appreciated