I want to create a flip card animation. I have started doing so on one of my websites but as you will see there is some issues with the rotate. It’s not as clean as I would like it to be.
What have you guys done to achieve this animation - and what is best practices for this?
Hi seank, I created flip cards on this site following the Webflow tutorial - trouble is they don’t work well in Firefox or IE. I have created a forum post about this issue but no replies yet!
my pleasure! If you don’t mind me commenting, on first load the images took a while to load and were a bit ‘crunchy’ - are the images actual size or HiDPI? Also I would remove the white background from the dresses image and add a hand point cursor to the ‘Shop Now’ button (will make it more of an interaction when you hover over)…
Absolutely not! love feedback ty. I was just playing around with it to see if I could figure it out. Luckily i did. I’ll fine tweak it now. It works for me on Fireworks, haven’t tried IE yet.
The shapes are pngs set up in Photoshop with an inside coloured stroke and 80% opacity background (to give the see-through wireframe effect) - then all added individually and moved around using 3d transforms and hover/rotate interactions. Phew! Seems like a lot of work now!
Thanks Sean! It was a bit of a head scratcher! The fact that the flips don’t work well on FF and IE for me is probably down to something I’ve done or not done! Good luck with your site!