How It's Made - The Stripe Navigation (Part 2)

This is the second part of a series on recreating design elements from the Stripe homepage.

In today's video we'll be tackling the header navigation which is one of the most dynamic part of the page. We'll be using Sass, Vue.js and a bajillion CSS transitions to recreate all the swinging, sliding and resizing animations.

To keep things a little simpler, we will be handling the horizontal resizing, but not the vertical resizing. The process to animate the height and width are pretty much the same so it shouldn't be too hard to figure out once you've watched the video.