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 React-Spring, but react-pose is much more declarative & takes the logic out of the main render tree, improving the overall developer experience_._
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, see the demo here. Firstly, we need to define a list item.
React-posed allows us to make it easily swipe-able by setting the draggable property. In this case, I only want to allow drag on the x axis:
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 triggerDistance (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.
Now, I need to make the color of the element behind change if the user swipes past the triggerDistance . 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.
In order to do that in react-pose, I need to create a new posed element that will fade from grey to purple as the user swipes:
The passive 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 here.
However, because those components have no way of interacting with each other, we need to store the value of x that indicates how much the user dragged the item, and pass it along to the SwipeableForeground component. We can easily do that in react-pose with their reactive data type called value .
In order to detect the swipe in theApp class, I can use the onDragEnd event that is fired when the user lets go of the Swipeable component. I also had to set a timeout so that the even is fired when the transition is fully complete:
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 PoseGroup to animate the disappearing of elements, by simply wrapping the Slideable list in a PoseGroup component and making the Slideable a 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🎉.