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

Top comments (3)

Collapse
 
grahamthedev profile image
GrahamTheDev

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

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