I use cookies to give you the best possible website experience.
By using COIDEA, you agree to our Privacy Policy.OK, CLOSE

Can tabbed navigation be clear and precise? Of course, it can, which makes it a valid form of navigation and content organization. What matters, as with most things related to UX, is how you implement it and how you optimize it. Today I want to show you how to do that by yourself with CSS3, Javascript and GSAP's TweenMax.

COIDEA - Animated Tabs with TweenMax

As we know, tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy. Each tab should contain content that is distinct from other tabs in a set. If you look at dribbble.com you can find many interesting ideas for tab bar design and animation. That's why I decided to choose an interesting idea and tried to code it with the help of CSS3, Javascript and TweenMax.

My animated tabs have a total of four categories and each of these categories has an unique icon, title, content, and color. Here I mention color for one reason, and that is: every time we click on one of the categories with the help of Javascript we find the main color for this category. Then we change the background color and font color of the active tab, display the content of the active category and further adjust the color of the whole section to match the color of the active category.

With this article, I continue to expand the "Snippets" category and I hope you like this snippet and find it useful!

References and Credits