Question About the New Flip Card?

Elements
1

The new Flip Card was an instant buy on the store. It allowed me to bench the version I had written.

But I do have a question about one of the behaviors.

I already have the card live on one of my sites, but I have noticed that if I move the mouse continuously over the four cards I have, that they will all rotate to open. I have them set to rotate on hover and this behaves correctly if you move slowly from one card to another. But when moving at a more steady pace over them they will all eventually end up open.

You can see this here.

GB24 Website

Is this expected behavior or do I possibly have something setup incorrectly. Ideally, I would like only one card to be flipped at a time, regardless of how I move over the cards.

I really like how it feels and am stoked we have this available. But I am curious about this issue as I could not find any documentation on the new component.

Thanks for making this available.

2

Nice job :+1: works fast on your site and is enjoyable and engaging….

3

I can’t replicate this, could you send a video of the bug? I tried everything I could think of to make the cards stay open and I couldn’t :thinking:

That’s not possible as the cards aren’t linked to each other, they all work independently!

4

This is a classic flip card bug. It happens because the transition has not finished flipping the card to the back, and your mouse has already left, so won’t register the mouse leave to flip back to the front.

2 Likes
5

Turned out the issue is in the JS. I amended a version of the origonal with a fix. If @ben wants to reach out in a PM, it’s a copy paste job. I won’t post the script here publicly.

3 Likes
6

I think this is what you meant right? So no card can get stuck on the back unless the mouse is over it?

1 Like
7

Yes this is exactly how it should behave but it does not on my site.

8

@ben Did you try it on my website, it is not hard to replicate on there. I just tried it again and I can easily end up with all of the cards open.

It looks like @Doobox Gary has an idea for a fix.

9

I did this about 8 months ago left it at this stage

10

@handshaper We’ve already fixed it… @ben is going to push out the update later today I believe.

11

Mahalo, @dan

1 Like
12

Hi @handshaper

I’ve just pushed an update to the Card Flip component on the store that will fix your issue — I also fixed a couple of other instances where it was possible for flipping to get out of sync and show the wrong face.

Give it a test and let me know if you’re still having issues :slight_smile:

1 Like
13

Aloha Ben, working flawlessly now.

I have to add that the update mechanism through the store is a gamechanger, well done.

2 Likes