Submitted about 3 years ago

React JS site with animation and transitions

Bonrey• 1,130

@Bonrey

Preview site View code

This is a solution for...

Single price grid component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

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. 🙄

Community feedback

ApplePieGiraffe• 30,565

@ApplePieGiraffe

Posted about 3 years ago

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! 😁

Bonrey• 1,130

@Bonrey

Posted about 3 years ago

@ApplePieGiraffe thanks a lot! As I said, this challenge was a warm-up before a bigger project 😉

P.S. Phew, from now on, I'll use "animations" without doubt 😄

LetsFrontend• 500

@B1N4R1

Posted about 3 years ago

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!

Bonrey• 1,130

@Bonrey

Posted about 3 years ago

@B1N4R1 thank you! 😊 Yeah, flexbox comes in handy quite often. I can't think of any project where I didn't use it.

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