Building a Complex UI Animation in React, Simply

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 container updates both its size and position. The gray background in the bottom half of the dropdown container transitions its height. As the dropdown container moves, the previous contents fade out and slightly to the opposite direction, as if the dropdown is leaving them behind, while the new contents slide into view. There are a few useful guiding rules to keep in mind as we embark on reproducing this animation in React. Where possible, let’s keep things simple by having the browser manage layout. We’ll do this by keeping elements in the regular DOM flow instead of using absolute positioning and manual calculation. Rather than having a single dropdown component that we have to relocate every time a user's mouse position changes, we’ll render a single dropdown in the appropriate navbar section. We’ll use the FLIP technique to create the illusion that the three separate dropdown components are actually a single, moving component. Scaffolding out the UI with styled-components To start with, we'll build an unanimated navbar component that simply takes a configuration object of titles and dropdown components and renders a navbar

Read more