Configurable CSS keyframe animations with styled components It’s getting closer, but we still have to attend to the small details the make the animation look great: the subtle rotation animation when the dropdown appears and disappears, the cross-fade of previous and current dropdown children, and that silky-smooth gray background height animation. See the Pen React Stripe Menu - Simple FLIP by Alex ( on CodePen. All that work and we’ve created something that looks like this: Because we still want translate transforms to affect the children, we also pass the scale prop to limit the cancellation to just scale changes. We can solve this problem by wrapping the children in a Flipped component with an inverseFlipId that references the parent component’s flipId (in this case "dropdown") to request that parent transforms be cancelled out for children. If you apply a scaleY(2) to a div with some text inside, you will be scaling up the text and distorting it as well. This unwanted effect occurs because scale transforms apply to children. See the Pen React Stripe Menu - Error #1: no scale adjustment by Alex ( on CodePen. Now we’ve got a working FLIP animation, but there’s still one problem: the contents of the dropdown appear weirdly stretched over the course of the animation: We’re animating the component and the component separately so that the overflow:hidden style on the component doesn’t interfere with the rendering of the component. Next, in our DropdownContainer component, we’ll wrap elements that need to be animated in their own Flipped components, making sure to give them each a unique flipdId prop: It provides us with two components: a top-level component, and a component to wrap any children we want to animate.įirst, let’s set up the Flipper wrapper component in the render function of AnimatedNavbar: // currentIndex is the index of the hovered dropdown This is a library I put together to make advanced and complex transitions easier and configurable. We’re going to be using the react-flip-toolkit library to help us animate the dropdown’s size and position. Animating our dropdown with the FLIP technique It’s the only element that we’re going to have to take out of the regular DOM flow and absolutely position, so we’ll ignore it for now. Notice that the gray background at the bottom of the menu is missing. See the Pen React Stripe Menu Before Animation by Alex ( on CodePen. With the components assembled without any animations, we’ve created something that looks like this: It turns out CSS animations and React play really nicely together, so we’ll be using CSS keyframes to add many of the animations later on. Not only are they a convenient way to build a modular UI, but they have a great API for adding configurable CSS keyframe animations. We’ll build the UI components using styled-components. The component will show and hide the relevant dropdown on mouseover. 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 menu. Scaffolding out the UI with styled-components We’ll use the FLIP technique to create the illusion that the three separate dropdown components are actually a single, moving component. 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 do this by keeping elements in the regular DOM flow instead of using absolute positioning and manual calculation. Where possible, let’s keep things simple by having the browser manage layout. There are a few useful guiding rules to keep in mind as we embark on reproducing this animation in React. 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.The gray background in the bottom half of the dropdown container transitions its height.The white dropdown container updates both its size and position.You might want to check out the finished product in slow motion (use the toggles) so you can catch all the details. See the Pen React Stripe Menu by Alex ( on CodePen.įirst, let’s break down the animation into different parts so we can more easily reproduce it. Our React guide is a good place to start. This is an intermediate-level walkthrough that assumes familiarity with React and basic animation concepts. It’s an impressive menu with some slick animation effects and the combination of these three tools can make it relatively easy to recreate. Let’s use React, styled-components, and react-flip-toolkit to make our own version of the animated navigation menu on the Stripe homepage.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |