Something like Flip Cards

Hello everyone,

I’m new to this forum and excited to be a part of this community. I’m currently working on a project in Sparkle and am looking for some creative solutions.

I’m interested in integrating flip cards into my Sparkle project, similar to the ones seen on this website: https://freefrontend.com/css-flip-cards/. These cards rotate to reveal additional information on the back, and I think they make a visually engaging interactive component for websites.

However, I’m not sure if Sparkle already has a built-in element or a feature that can create this kind of effect. Has anyone here experimented with this or knows a way to implement something like this in Sparkle? Any suggestions or pointers to useful resources would be greatly appreciated.

Thank you in advance for your support!

Best regards, Lorenz

Welcome onboard @Lorenz ! :slight_smile:

The flip card is a good effect but for now Sparkle is unable to achieve the effect.
Although that is the case Sparkle will allow you to do similar like what I have created here, just not the flipping - Mini-Block 3 Card Image Transition 1

The demo is an on-click event, but you can also have it as phase in and phase out event on hover.

Thanks your are a great inspiration for me!
Have a nice day.
Michel

1 Like

Hello FlaminFig,

Thank you for the warm welcome and for sharing your Mini-Block 3 Card Image Transition project! It looks really cool!

I’m intrigued by how you’ve managed to create this effect in Sparkle. Could you kindly share some insights or steps on how you achieved this? Understanding your approach might help me come up with a creative solution for my project, even without the flipping effect.

Thanks again for your help and inspiration!

1 Like

Sure @Lorenz

I used three Images and three Popups (normal sitting). The image when clicked calls the Popup (with text) into place on top of the image with a fade into place transition.

There is a real lot you can do with Popups… you just have to think outside the box.
Have fun! :slight_smile:

2 Likes

@FlaminFig,

I tried out your concept of integrating three images with popups and the fade-in transition effect. I must say, it worked out really well (for the quickly set up prototype). This approach will add a nice interactive element to the project, and the transition effects were smooth.

Thanks for sharing the idea – it’s been useful for my work.

Best

Yeah the popup coming in on click (or hover) is probably best. The flip animation looks cool exactly once. Second time it’s already slow and frustrating.

Not to say we don’t want people to come up with creative ways to liven a page, and create the tools to do it, but all the 20 animations on the page look very similar…