Design comparison
Solution retrospective
So finally, I did implement the flip animation! This was somewhat challenging. I had almost no problems while doing the flip in css on hover but to integrate it with setTimeOut is tough!! You have to add and remove classes at specific intervals and make sure that they work properly with the effect.
My javascript code has kind of become spagghetti code while writing this and it was sad. :(
I learnt that I am not able to change scss variables using media queries. Guess it is back to css custom properties :_)
Any feedback on how I could have done it better, what should I have focussed on while solving this would be valued. It would mean so much to me.
Community feedback
- @grace-snowPosted over 3 years ago
Hi
This doesn’t work at all for me I’m afraid (on iphone). It doesn’t fit on screen and when I scroll to see the animated bit it’s just flickering back n forth between numbers.
Sorry to be bearer of bad news
Marked as helpful1@sarvagya2545Posted over 3 years ago@grace-snow Oh no! :( Can you share a recording or something? Let me see what exactly the issue is.
Edit: Nevermind. I just realised that I haven't made it responsive. Thanks for pointing it out! I will fix this and post a new solution.
0 - @vatsalsinghkvPosted over 3 years ago
Hey would you like to teach me how did you make cards flip....
0@sarvagya2545Posted over 3 years ago@vatsalsinghkv Hey! I think Kevin Powell's video can explain it much better than I can. Here is the link: https://www.youtube.com/watch?v=FeJEEE3zc4U
Sorry for the late reply tho!
0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord