3-Column Preview Card - SCSS, Grid, CSS Animations (Desktop)
Design comparison
Solution retrospective
More animation practice! 😄 Hopefully the screenshot will be ok this time, as the animation is a bit faster than the stats card solution. The animations are only for the "desktop" layout. I think a similar but vertical, "slide down" animation for mobile would be lost on most users due to the smaller screen height and would also be too much movement for a small screen. Let me know what you think!
prefers-reduced-motion was used to prevent the animations from occuring for those who prefer motion reduced. I also added aria labels to the card links to make them a bit more descriptive, but I'm unsure if this is actually helpful for screenreaders or comes off as redundant. Still learning! 😅
Community feedback
- @RayaneBengaouiPosted over 3 years ago
Hello Anna,
Once again you came with a nice idea on animations 🙂
I really like the use of cubic bezier as a timing function to get this "coming back" effect at the end of the animation 😍
Just on your SASS part, instead of using @import with SASS, it's recommended to use @use because the first one is now deprecated.
You can find more information on the SASS official documentation (https://sass-lang.com/documentation/at-rules/import) where it's well explained. Also here is a great video of Kevin Powell that shows how to use it (https://www.youtube.com/watch?v=CR-a8upNjJ0).
Happy coding ! 😃
2@brasspetalsPosted over 3 years ago@RayaneBengaoui Thank you! 😊
I'm currently using a VSCode extension to compile my Sass, so have to use @import. I'll admit I've been avoid making the switch. 😅 The video was excellent though, and very informative - thanks for sharing! I'll try to not be so lazy about it, and make the change for my next project. 😄
1@RayaneBengaouiPosted over 3 years ago@brasspetals I was also using a live SASS compiler before but now I switched to Parcel for bundling and it's pretty convenient. 🙂
Here is another video of Kevin Powell on how to use Sass with Parcel (https://www.youtube.com/watch?v=wYWf2m_yzBQ) to get the auto refresh while coding.
1 - @ApplePieGiraffePosted over 3 years ago
Hello, Anna! 👋
It's nice to see you submit another challenge already! 😊 I was actually thinking about that same sort of animation for this challenge (but I guess I'll have to go brainstorming for something else when I come around to this one, LOL)! 😅 Of course—nice job! 👏 Everything's looking good and the animation's great! 😀
And keep coding (and happy coding, too)! 😁
1@brasspetalsPosted over 3 years ago@ApplePieGiraffe I was thinking of doing the Bookmark challenge after I finish the one I've been "productively procrastinating" on with these last two challenges. I was looking at your Bookmark solution last night thinking basically the same thing, like "Dang! For this section I'll have to do something else" 😅. In fact the little "bounce back" effect on this one was added so it wouldn't look too similar to your pricing component animation.
Anyway, I'm sure you'll come up with something fantastic as usual. 😄 👍 Another version I had considered was having the top card come up first but on the far right, and then slide left, revealing the other two. Kind of like fanning out a deck of cards?
1@ApplePieGiraffePosted over 3 years ago@brasspetals
Ooh, that's a good idea! 😀 I just might steal it! 😎
1 - @tedikoPosted over 3 years ago
Hello, Anna! 👋
Well done! Perfect animation, subtle but it brings some life to a project. I am big fan of animations and like to work with them, sometimes i know that I am exaggerating with them but at the end of the day its all just for fun ;) The only thing that i noticed in your project is
outlinefor your button focus. Nowoutline-widthis set to default 1px and it doesn't look good. I would consider to remove it since you change border/background while button is focused or change it to 2px instead.Good luck with that, have fun coding! 💪
1@brasspetalsPosted over 3 years ago@tediko Thank you! 😊 I'm trying to get more comfortable with animation. These smaller projects seem a good place to practice, and I feel they give me a little more freedom to "exaggerate", like you said, than I would on a larger project.
You're right, the outline could use a bit of work in the aesthetic department! 😅 I defintely want to keep it for accessibility though, despite the current hover/focus state being pretty obvious.
0 - @yuridapazPosted over 3 years ago
Great. I love it
1
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