Card Flip Interaction With Affected Sibling

Design help Animations & Interactions
1

Good afternoon, Webflowers. I need some help with this card animation interaction and am hoping that someone has already done this or can point me in the right direction. Currently, when I click a card, it flips to the reverse side which is exactly what I want to happen. What I need to do is when I click a second card, it flips and turns the previously flipped card to its front face. For example, I click red and it flips to orange. When I click any other card, I’d like it to flip to its back face and flip the first one back to red. This is on the close-hide siblings page. Thanks for the assist.

Here is my public share link: LINK
(how to access public share link)

2

Sure, where is the interaction now? Which element is it on? I see the flip, but can’t find where affect is.

3

I haven’t quite figured out how to get clicking a card to affect a sibling that was already flipped via a click…that’s my issue. Hope you can help.

4

Okay but where is the interaction? Which element is it on? I checked all the boxes and the parent elements it was contained in … and couldn’t find how you started it. If you could be a little more specific.

Have you looked at the card flip tutorial here?