Stats Preview Card - SCSS, Grid, CSS Animations
Solution retrospective
What was originally a break from a larger project turned into a fun animation experiment! I spent an ungodly amount of time messing around with cubic-bezier curves. 😅 Hopefully they don’t mess up the screenshot.🤞 (Edit: Yep, they did. But only a little! 😁) The statistics are only animated on the desktop layout, as I felt it was a bit too much on mobile.
First time implementing prefers-reduced-motion to prevent animations for those who prefer it reduced. It seems to work when I test it, but please let me know if there’s any goofiness.
Also first time using mix-blend-mode, which seemed to work well in combo with opacity to get close (I hope) to the header image design.
Shoutout to @ApplePieGiraffe for inspiring me to play around more with animations.
As always, any and all feedback is greatly appreciated!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @ApplePieGiraffe
Hey, Anna! 👋
Amazing job on this challenge! 👏 I really like the text-fill-color-effect-thingy (😅) in the heading and those staggered fade-in animations on the statistics! 😉 Everything else is point (as expected)! 🙌 (And thanks for the shoutout, BTW. 😊)
Keep coding (and happy coding, too)! 😁
- @grace-snow
This looks really good, well done 👏
- @RayaneBengaoui
Hello Anna,
Your solution looks so great ! 🙂
I really like the effect on the
<span>!I didn't know about
prefers-reduced-motion, thank you for sharing this ! 😃 - @nirtamir2
Awsome! Nice use of the
pictureelement for andsrcsetattribute. I like that you use opacity +mix-blend-mode: multiply;on the image and color the picture container for the image coloring. It looks great and the animations are great!
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