React JS site with animation and transitions
Solution retrospective
Hello there 🙋♂️
It was a nice challenge! I did it mainly to practice css animation with React, since I was a bit inexperienced in it and couldn't tackle bigger projects 😔
In fact, it turned out to be harder than I thought at first. The thing that helped me the most was forwards value in animation-fill-mode property (it makes the element retain the computed values set by the last keyframe). A real life-saver 😅
Another thing I practiced was writing clean code (well, at least I tried), not using extra properties or variables. Plus, I used sass @mixin for the first time.
So, the overall experience was pretty gratifying!
P.S. Could someone tell me if you can use the word "animation" in plural in this context (see the first paragraph)? English is not my first language, and I'm a bit confused. 🙄
Please log in to post a comment
Log in with GitHubCommunity feedback
- @ApplePieGiraffe
Hello, Bonrey! 👋
Nice job on yet another challenge! 👏 The "Thank you!" animation looks great and is a cool addition to this solution, I think! 😀
Like B1N4R1 mentioned, "animations" is definitely valid English! 😄
Keep on going with these challenges! Happy coding! 😁
- @B1N4R1
Hi Bonrey,
Great solution to the challenge, I liked how you animated the card and how the "thank you" appears when you click the button and you did it all with React, That's great!
I like the way you used Flexbox's flex-basis property to make the layout of the card, I thought of doing this challenge using CSS Grid but Flexbox is a good way to go to.
Regarding your english doubt, you can use "animations" with no problem to refer to more than one animation
Keep on like this!
Cheers!
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