DEV Community

Cover image for Amazing Tab Bar (Animated)
Vitor Amaral
Vitor Amaral

Posted on

Amazing Tab Bar (Animated)

Animated Mobile Tab Bar

This CodePen was created by @amaralflavio (aka my little brother), it shows a cool tab bar animation that can be used for a mobile navigation. The code and demo https://codepen.io/flavio_amaral/full/xxgYGrR

Sharing here to give him some love.

Credits: - Design based: https://dribbble.com/shots/10474707-Experimental-UI-animation - Icons: https://icons.getbootstrap.com - Colors: https://material.io/resources/color - Font: https://fonts.google.com/ - Image: https://www.pexels.com/ - Jello Animation: https://animista.net/play/basic

Discussion (3)

Collapse
inhuofficial profile image
InHuOfficial

Looks great!

Give your brother a little push to consider disabled users though, it is unusable with a keyboard due to lack of focus indicators and the fact you can still tab to "new, popular and following" even when they are not visible.

However he is (or will be, not sure how old he is!) a great designer with UI elements like that ❤

Collapse
vacom profile image
Vitor Amaral Author

Hey Thank you for the feedback.

Collapse
afif profile image
Info Comment hidden by post author - thread only accessible via permalink
Temani Afif

Your brother already posted the same: dev.to/amaralflavio/amazing-tab-ba... .. can you please keep only one post for this? (either this one or the other)

Some comments have been hidden by the post's author - find out more