From our monthly sponsor: Automate manual QA and catch visual bugs with Percy’s all-in-one visual testing and review platform.
Today we’d like to share an experimental tab-like navigation with you. The main idea is to animate the bars of the navigation in a way that they expand to reveal some further content. The navigation is either shown in a vertical or horizontal orientation. For this experiment we are using anime.js.
Here’s a preview of the demos for the view when the navigation is closed and open:
For the third demo, we’re not showing the navigation by default. There is a menu button at the bottom of the page and once clicked, the navigation appears in the center of the page.
We hope you find this little experiment inspirational!