Animations in React at 60fps! An introduction to React-Pose by@dominik.t
5,703 reads

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

Read on Terminal Reader

Too Long; Didn't Read


Companies Mentioned

Mention Thumbnail
Mention Thumbnail
featured image - Animations in React at 60fps! An introduction to React-Pose
Dominik Tarnowski HackerNoon profile picture

@dominik.t

Dominik Tarnowski
react to story with heart

image

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:

image

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.

image

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:

image

Now, let’s add some CSS and see it in action (final css code available

):

image

image

Now, I’m going to add an element below our draggable overlay that will appear there as we swipe left/right:

image

image

I’d also like to prevent the user from dragging from left to right:

image

image

Now, I’m going to replace this ugly bar with an actual material design list item:

image

image

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:

image

image

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:

image

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 .

image

image

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:

image

image

Now let’s add more items to the list and make sure each one of them has it’s own :

image

image

Now I need to make the swiped items disappear:

image

image

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 :

image

image

image

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:

image

image

And here’s the final result:

image

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🎉.

RELATED STORIES

L O A D I N G
. . . comments & more!
Hackernoon hq - po box 2206, edwards, colorado 81632, usa