⭐ Interactive Rating Component | React | SCSS | Webpack
Design comparison
Solution retrospective
Hi! It's been a good minute since I posted a solution on here. I have been teaching myself ReactJS and wanted to create a small project so, I chose to solve this newbie challenge for some practice.
However, I was unable to complete this challenge on my own. Thanks to this solution I realized where I was going wrong and managed to create my solution.
I have no questions for this one, but I'm open to any tips and feedback you have for me :)
Community feedback
- @igor-ostojicPosted over 2 years ago
Amazing work, i love the snappy animations !
1 - @MohtashimAli85Posted over 2 years ago
Loved the animation part <3 Also code is clean !
1 - @MohtashimAli85Posted over 2 years ago
btw can you give tips regarding seamless animations and anything else :3
0@buneeIsSloPosted over 2 years ago@MohtashimAli85 Of course, If you're looking to create animations involving CSS 3D transforms, This website has everything you'll ever need.
The key to making any animation smooth/seamless is to use easings, and by this, I mean using
cubic-bezier
instead of the defaultease-in
orease-out
functions. You can use easings.net to learn more about them.CSS animations are great, but they have limitations, so I prefer using third-party libraries like anime.js or GSAP. Personally, I don't have a lot of experience with GSAP, but you give both of them a try and see which one you're comfortable working with.
I hope this helps :)
1@MohtashimAli85Posted over 2 years ago@buneeIsSlo I see. I have tried anime.js looks a bit confusing to me havent used GSAP. How did you learn anime.js ?? thank you so much ^^
0@buneeIsSloPosted over 2 years ago@MohtashimAli85 Out of the two libraries, anime.js is considered more beginner-friendly. Have you checked out the Documentation? In my opinion, It has some of the most elaborate demos and code explanations. However, I think this video should help as well.
1
Please log in to post a comment
Log in with GitHubJoin 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