Flip cards animation with click trigger

[AlexeiD]

Hello! Hope you are well!

I want to make a flip animation for some cards, reordering/swaping them by clicking each box.
When a box is clicked that would be positioned first, with different width and height and all the other elements should swap and follow the container remaining space.

I have an example in the codepen attached, using gsap flip animation, but I cannot find a proper solution to animate this better. 

Do you have any ideas? Thanks!

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

[Rodrigo]

Hi,

 

In this cases it's always better to update the DOM in order to make it look the way you want. The best approach is to get everything working in that way (moving and re-arranging the DOM elements accordingly) first and the add the Flip Plugin to the mix.

 

I forked your codepen example:

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

 

Hopefully this helps.

Happy Tweening!

[AlexeiD]

Hi, @Rodrigo! Back here with a question.

Is there a way to control the flip plugin using a set of arrows? In other words, can I have two buttons, one for "prev" and one for "next," and be able to click these buttons to cycle through the items?
 

[Rodrigo]

Hi,

 

Sure it can be done, is just about updating the DOM in the same way but using two different event handlers one for clicking the box and another for a previous/next buttons. As I stated before:

On 6/23/2023 at 12:44 PM, Rodrigo said:

In this cases it's always better to update the DOM in order to make it look the way you want. The best approach is to get everything working in that way (moving and re-arranging the DOM elements accordingly) first and the add the Flip Plugin to the mix.

Unfortunately this is a bit beyond the scope of the help we can provide in these free forums, since this falls more into the custom JS logic category, rather than a GSAP related issue. The Flip part of this will stay the same, the challenge is re-arrange the DOM and add/remove classes so everything works and doesn't brake considering both available options (buttons and click events). Just focus on creating that logic and the Flip part would come into place by itself.

 

As I mentioned we don't have the time resources to tackle this kind of custom logic solutions for our users. You can contact us for paid consulting or post in the Jobs & Freelancing forum to get help there.

 

If you have a GSAP related question, we'll be ready answer them!

 

Good luck with your project!

Happy Tweening!