React Card Flip Animations
As I began to delve into the world of web development, I began to notice little things on sites, that even though I had always known they were there, I had never truly noticed. I’ve made my fascination with common and subtle little animations abundantly clear, but what I’m referring to now is on an even more basic level. Maybe I’m oversimplifying, but I’ve began to see that almost every website that I regularly visit utilizes some type of ‘card’ component in their design. From major streaming services like Netflix and Youtube, to news sites and sites such as this one, every place I look I see cards. From what I can tell, there are really a few common patterns in the implementation of a card component. One of the most frequently seen styles is to simply add a box shadow attribute to the card when the mouse is hovering on it. This combined with changing the cursor style to pointer, really drives home the fact that the card should be clicked on. Another common practice is to show a preview of whatever media the card is linking to; I notice this especially on Netflix where sometimes this feature can start to become pretty annoying. The last common practice is to create a card that appears to flip itself over, revealing more information on the back — just as if it were a real printed card.
Naturally, given my inclination towards animation, I wanted to learn how to create these flipover cards myself. I thought that it would be good to start out by trying to create the effect on my own, without any outside code. I had just learned more about keyframes, and felt confident that I would be able to at least get something approximating a card flip animation, and I did — although the key word there is “approximating”.
I was working on creating this flip card in a React project, and I felt that the appropriate structure would be to have a card container component, and then a card front, and card back component. I thought that maybe if I conditionally displayed either the front or the back of the card based on a condition held in in state in the CardContainer component that I could achieve the look that I was going for. I’ve since scrapped this attempt, but below is a close representation of what I was going for.
I also then wrote a keyframe animation that I would apply to both the CardFront, and CardBack whenever they were added to the DOM. Like I said, I no longer have the keyframe rule that I wrote since I decided to go in another direction, but essentially I wanted the animation to consist of a rotation on the y-axis of 180 degrees. One key component of this animation needed for it to even come close to appearing correct is to utilize the backface-visibility property, in order to ensure that when the card is flipped around, that the opposite side of it, essentially a mirror image, is not displayed. However, despite a lot of tinkering and time wasting, I could not get the animation to appear as I thought it should. I had no choice — I had to follow a tutorial.
I still wanted to utilize the same file structure — after all, who wants to retype the boilerplate and deal with all that? I ended up making a few alterations, but by following the outline listed here: https://www.w3schools.com/howto/howto_css_flip_card.asp, I was finally able to get the card flip effect that I was looking for. I found it interesting to attempt to make the animation myself, although, as with many things, the more time-effective solution is to rely on the code of others and make customizations as-needed. I feel that as long as I still understand what is going on, then there’s no problem with this, and only if I had no idea what the code I was emulating was doing would it be a problem.
https://www.w3schools.com/cssref/css3_pr_backface-visibility.asp
