Animations in React at 60fps! An introduction to React-Pose

PopMotion/Pose is a simple animation library for React, React Native, Vue and even vanilla JavaScript. In this article, I will go through a simple practical example in React that will teach you a lot about react-pose. You can find out more in their . official docs The problem with CSS CSS is great for simple UI animations, state to state transitions or even component entry animations. However when it comes to more interactive animations, spring effects, or list insertion/deletion/reorder transitions, CSS falls short. This is where 3rd party animation libraries come in. There are quite a few great ones, such as is much more declarative & takes the logic out of the main render tree, improving the overall developer experience_._ React-Spring , but react-pose Building a swipe-able list I decided to pick a practical example, something we could all use in our material design application. On the official material design website, we can find this gesture concept: And this is what we will be making. If you’d like to see the final result already, . Firstly, we need to define a list item. see the demo here React-posed allows us to make it easily swipe-able by setting the property. In this case, I only want to allow drag on the x axis: draggable Now, let’s add some CSS and see it in action (final css code available ): here Now, I’m going to add an element below our draggable overlay that will appear there as we swipe left/right: I’d also like to prevent the user from dragging from left to right: Now, I’m going to replace this ugly bar with an actual material design list item: As you probably noticed, when we let go of the item, it doesn’t swipe to the left and disappear, this is what I’m going to do next. Fortunately, react-pose has a great declarative transition API: As you can see, react-posed uses a variable called (in this case set to 60) to determine whether the user has swiped far enough to perform a swipe and if not, it comes back. triggerDistance Now, I need to make the color of the element behind change if the user swipes past the . Unlike on the original animation, I’m not going to use a ripple animation in order to keep this article focused on react animations and not implementing a material design ripple. I’m going to build a colour blending animation. triggerDistance In order to do that in react-pose, I need to create a new element that will fade from grey to purple as the user swipes: posed The indicates that the transition will be based on the drag value of a component. The pipe is used in order to select how the color will fade. I won’t go into much detail yet, but you can read more about pipes . passive here However, because those components have no way of interacting with each other, we need to store the value of that indicates how much the user dragged the item, and pass it along to the component. We can easily do that in with their reactive data type called . x SwipeableForeground react-pose value In order to detect the swipe in the class, I can use the event that is fired when the user lets go of the component. I also had to set a timeout so that the even is fired when the transition is fully complete: App onDragEnd Swipeable Now let’s add more items to the list and make sure each one of them has it’s own : Now I need to make the swiped items disappear: And finally, we can use to animate the disappearing of elements, by simply wrapping the list in a component and making the a : PoseGroup Slideable PoseGroup Slideable posed.li Finally, I just want to change the springy animation after deleting each item to a simple “ease” to make it more like the animation I’m trying to replicate: And here’s the final result: That’s it, we did it! If you’d like to see more of this type of content, give this article a clap, or two, or 50👏. I’ll keep releasing more react tutorials like this soon🎉.