Item order animation

[AlexeiD]

Hello! Hope you are well! 

I have a minimal markup on the attached Codepen. 

How can I achieve an animation using GSAP like this: when I click or hover on a trigger on the right side I want to make the exact index box on the left to be like featured on top and the other items to move on the bottom row based on the trigger that I clicked, reordering the other divs on the left (clockwise and counter clockwise) based on the selection.

See the Pen zYMqRVq by Alexandru-Dinca-the-styleful (@Alexandru-Dinca-the-styleful) on CodePen

[akapowl]

 

Hello Alexei, welcome to the GSAP forum.

 

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations - please read the Forum Guidelines.

One way you could handle animating the re-ordering of the elements on the left, would be to use the FLIP Plugin.

Here is a rather basic example - all the logic around that for achieving what you have in mind would be yours to figure out though.

If you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look.
 

Good luck with the project.

 

See the Pen VwVjvgG by akapowl (@akapowl) on CodePen

 

[Rodrigo]

Hi,

 

Maybe this examples could provide some inspiration:

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

 

See the Pen YzreJZG by pehaa (@pehaa) on CodePen

 

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

 

Hopefully this helps.

Happy Tweening!