GSAP Center 5 elements in center and after that return them to their original positions

[DanielLav 1 Likes (Newbie)]

Hello GSAP family! I have a very interesting problem with which I hope you can help me.

 

I have 5 elements

category-capsule__item

that I want to first show in the center (one after the other in the same place) and then return them to their original position.

 

You can see how I try to do this in my codepen:

 

And after the animation completes, I want to give the elements a scale value when hovering over them.

I'm trying to do it via position absolute and position: 

position: "absolute",
xPercent:-50,
yPercent:-50,
left:"50%",
top:"50%"

And then I position the elements through the left: 0 property.

But this is a "crutch". Because in this case, I will have to position each element with absolute positioning and there will obviously be problems during adaptivity (because eventually I will have to change the position of the elements and make them two in a row).

 

I am sure that GSAP has some simple solution for my problem. Perhaps you could help me?

I've been thinking about how to do this for two days now. And to be honest already desperate

See the Pen KKxXVYL by ProjectDCL (@ProjectDCL) on CodePen

[Rodrigo 5,407 Likes (Superhero)]

Hi,

 

I read your post a few times and I'm not completely clear about what you're trying to do, so I took a guess and came up with this:

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

 

Basically I'm using the Flip Plugin to set the position of the elements and then animate them back to their normal position. Once that is completed I toggle a boolean to allow the mouse enter/leave events and apply a scale animation.

 

Hopefully this helps. If is not what you're after, please be as specific as you can about what you're trying to do.

Happy Tweening!