Author: Alex Holachek

Let’s use React, styled-components, and react-flip-toolkit to make our own version of the animated navigation menu on the Stripe homepage. It's an impressive menu with some slick animation effects and the combination of these three tools can make it relatively easy to recreate. This is an intermediate-level walkthrough that assumes familiarity with React and basic animation concepts. Our React guide is a good place to start. Here's what we're aiming to make: See the Pen React Stripe Menu by Alex (@aholachek) on CodePen. View Repo Breaking down the animation First, let's break down the animation into different parts so we can more easily reproduce it. You might want to check out the finished product in slow motion (use the toggles) so you can catch all the details. The white dropdown conta...