Problems with reverse

[Martin Vanegue]

Hi, I'm martin

Thanks in advance for your help, 

 

What I do is I have 3 divs, I want to animate them separately on click with GSAP.

 

I do some stuff like going from display none to display block with some of the child elements of my div, resize it... 

 

It works once, 

 

But then after the first open and close from one div, it doesn't not work.
I figured it was because I wasn't restarting my tweens, 

 

And now that I'm trying, it doesn't work neither. 

 

Please help ahah

 

Thanks  a lot. 

 

 

 

 

See the Pen NWJMVYR by Martin-Vanegue (@Martin-Vanegue) on CodePen

[mvaneijgen]

Hi @Martin Vanegue welcome to the forum!

 

There is a lot going on in your demo! And I'm struggling to figure out what does what. I would suggest checking out this awesome getting started guide https://gsap.com/resources/get-started/

 

1. First and most important, you can't have  transition: all 0.3s ease-in-out; on an element that you animate with Javascript You should never apply CSS transitions to anything that JavaScript is animating because not only is it horrible for performance, but it'll prolong all the effects because whenever JavaScript updates a value (which GSAP typically does 60 times per second), the CSS transitions interrupt and say "NOPE! I won't allow that value to be changed right now...instead, I'm gonna slowly make it change over time". So it disrupts things, adds a bunch of load to the CPU because you've now got CSS and JS both fighting over the same properties, but let's say you've got a 1-second tween and the CSS transitions are set to take 1000ms...that means what you intended to take 1 second will actually take 2 seconds to complete. 
2. Personally I would animate all the properties with GSAP instead of setting a class, that will be much easier to manage. 
3. You can't animate display. I would advise you to use opacity, this will be much more performant (certainly when the elements need to reappear again in the future) and also check out .set() which is a 0 duration tween, but that all gets explained in the getting started guide.
4. The paused property is a boolean, maybe GSAP know what you mean, but I would get in the habit of setting paused: true, instead of passing it the string "true"
5. I think it will be much easier to animate different elements instead of resizing and moving the same element to different places. So create .box1 ect, and then create .container1 which is the element that takes up the full screen. Or check out our Flip plugin https://gsap.com/docs/v3/Plugins/Flip/

This is already a lot of text, so I'll leave it at this for now. See how far you can come with this feedback and post back here if you have tried some more things (but be sure to keep it simple). Hope it helps and happy tweening! 

 

[Martin Vanegue]

Hey!!! thank you so much @mvaneijgen!

 

I'm just starting using GSAP, I know I'm doing everything wrong...

 

About the css/js pointing on the same elements, this was not my original idea at the beginning, 

I used to have some addEventListener for "mouseenter", "mouseleave" and "click". 

 

But then once clicked, the mouseleave event would still try to do the same as if I hadn't clicked... it was a bit messy.

 

Thanks for the idea of bringing another boxcontainer. Now I just adjust the parameters based on where the click comes from. 

 

It's much better. 

 

Thanks a lot for your time and help.
 

Have a nice Sunday night. 

 

Thanks again

[Rodrigo]

Hi,

 

Hopefully this Flip demo can provide some inspiration:

See the Pen XWOeLEb by GreenSock (@GreenSock) on CodePen

 

Happy Tweening!