Submitted over 4 years ago

Four card feature section with Sass, BEM and some CSS animation

Greta• 340

@gretagr

Preview site View code

This is a solution for...

Four card feature section

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hello there. With this project I'd really like to work on SVG animations, like the blink of an eye, appearing light bulb rays, and so on. I think animation should happen when the site visitor hovers a particular card.

The problem, I don't even know where to start. It seems a very complicated process. How do you animate your SVG's? Do you use CSS, js or some particular libraries?

Community feedback

argel omnes• 1,800

@argelomnes

Posted over 4 years ago

Hi Greta,

I love your idea regarding how the icons will animate. Mind if I use it when I do this challenge? I saw someone used GreenSock in his/her solution but can't remember who or what the project was. (sorry). Maybe starting with that will help.

Greta• 340

@gretagr

Posted over 4 years ago

@argelomnes I'm glad you liked the idea, of course, you can. I'm looking forward to seeing your solution! And thank you for the suggestion, I found an interesting tutorial regarding GreenSock and SVG's, I'm going to try to use it in my project.

Matt Studdert• 13,611

@mattstuddert

Posted over 4 years ago

Awesome work again Greta, your solution looks really good! When it comes to learning about SVG animation I'd recommend reading articles by and watching videos of Sarah Drasner. She's an amazing developer and specifically focuses on SVG animation a lot of the time. She's done loads of talks that are up on YouTube. Well worth watching!

Matt Studdert• 13,611

@mattstuddert

Posted over 4 years ago

@gretagr haha, she does! Her talks are always really interesting and full of amazing tips and tricks.

Greta• 340

@gretagr

Posted over 4 years ago

@mattstuddert thank you for your feedback and suggestion of Sarah! I looked her up, she makes SVG's sound soo exciting!

B-Shadoink• 80

@B-Shadoink

Posted over 4 years ago

How did you do those animations Greta? awesome work bytw.

Greta• 340

@gretagr

Posted over 4 years ago

@B-shadow thank you! It's just plain old CSS. I use transitions for smooth breakpoints, for hover effects - transform: scale, scale + keyframes for cards on load.

Please log in to post a comment

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