@vladmee
Posted
Great job! Your project looks excellent, almost pixel-perfect!
I like that you added extra stuff, I noticed the flip animation on the mobile menu toggle. That's a nice touch!
The animation on the tabs is nice too but, as @Cor-Ina already mentioned, this is not really a UX improvement. Yes, users prefer reduced motion, but another thing you should consider here is to not move the controls. The tab buttons should always be predictable for the user. Imagine someone wanting to check all options before making a decision. They would want to click on each tab in a sequence. In your solution, their tab buttons run away before they can click. They are coming back but the brain tells you something else until the animation is done. You know what I mean, right?
In this case, I would consider other types of animations and only affecting the content (image, text etc.) elements that change! You can have the text blink (opacity animation) or reveal top to bottom (size animation). That's actually a UX improvement because the user will be aware that those elements updated and she needs to read it again. Hope that makes sense! Let me suggest animista which is a nice collection of CSS animations.
And, if you want to bring it to another level you could even have the elements revealed in a sequence, one by one. That would be a great practice for you if you haven't played with delay and triggers before!
Other than that you nailed it. It looks exactly like the designs! Maybe revise your CSS a bit. I've seen a few things like max-width: 110vw; This translates to: this element's width can't be more than 110% of the viewport width which is... impossible unless you have horizontal scroll (not advised!) So I think this line doesn't have any effect.
Keep up the good work! Looking forward to seeing your next projects!
Marked as helpful
@barbaradamasdev
Posted
Hi @vladmee . Thank you for the observations. I`ll take a look in everything you said. You helped a lot 😍🙏🏻
