Amazing React animation with react-pose

Dead easy animation with similar API to styled-components

Photo by Nikita Kachanovsky on Unsplash

Note: You need React 16.3 so if you want to use react-pose you must upgrade if you haven’t already

Animation in React has always been a fuzzy subject. Many people don’t even know how to start looking for something to help them build cool and fun animations for their web projects.

Of course there are a few packages that help us, like:

• react-motion — A very good and reliable one, I’ve used it and will probably use again eventually;
• react-animated — Never used because it always felt confusing to me but mostly because react-motion filled all my animation needs, but heard great things about this animation lib;
• react-transition-group — The “classic”, probably the first one I tried when starting out with animations.

All these packages are great in their own way and they work! But I was looking for something new and something that just felt right. That is when I found react-pose!

But css animations are great. Why should I use js animations?

You’re absolutely right. CSS animations are great and you can do so many things with them. And please USE them! Js animations are useful in their own way.

• Use css animations if you’re doing simple and self-contained animations. You can keep the state in your Javascript and the animations on your css.
• Use javascript animations if you want absolute fine-grain control over your animation. For example pausing animations or even changing animation values mid way like stiffness, damping and acceleration.

Read more about it here!

react-pose

This library is amazing. You can use it to create animated and interactive components that you can reuse throughout your React website.

Declarative motion system for HTML, SVG & React

You can check the React component API here! It is very simple and very reminiscent of styled-components API.

Install it like so:

$ npm install react-pose --save
// or
$ yarn add react-pose

And import it just you would styled from styled-components

import posed from "react-pose";

Let’s go through some examples so you can learn how to use it!

I’ll use styled-components to style my examples.

First example — Simple scale on hover

In this example what I want is to animated the overall size of the square drawn in the center of the screen. I want it to increase when I hover but when my mouse unhovers I want it to go back to its previous size. We can do that by defining 2 poses when creating a posed Component.

How we created a posed Component

As you can see we have the idle pose where the scale of the div is 1. We also define a hovered pose where we increase the size by 50% making it 1.5.

We apply these poses by defining a state of the component and setting the correct pose.

Rendering the square and setting the pose depending on the state

It’s this easy! 😃 💯 Try it out in the example below!

Simple scale on hover

Second example — Draggable div with wavy and background color animation

In this example we can see how we can make a div become draggable on the x axis and alternate it’s position and background color.

Let it inspire you in the example below!

Draggable div with wavy and background color animation

Third example — List with re-ordering animation

Can you imagine an inbox? Messages coming in and out. It would be cool for the new ones to animate to the top because they’re the most recent messages, uh, and the new ones can fade in to the inbox.

Easy! This is all you need!

Our Item Component will be incoming or existing messages. When entering, the opacity is 1 and when leaving, the opacity is 0. The animation for the order of the messages is handled by our PoseGroup Component. All you really need is an unique key so that pose can handle it for you.

See it in beautiful action in the example below! 😃 💯

List with re-ordering animation and fadeIn, fadeOut

Fourth example — Applying FLIP Technique

The FLIP technique, fully explained here, is a way of animating expensive, layout-breaking animations like width and top by using quick transforms.

For layout breaking and complex animations such as animating size and position of elements, pose handles those changes for you.

Pose will measure the size and position of the element before and after, and animate from one to the other using transform properties instead.

With just this, you can have a simple clickable div become a fullscreen modal.

WonkyModal code

Check it out in action in the example below! Think about other possible use

cases, for example, expanding an image into fullscreen on click. Since you’re doing this with js you can even apply some transformations to your image so that it properly adjusts to fullscreen.

Applying FLIP technique

Final example — Customizing transitions

With react-pose it is possible to configure and customize transitions. Read all about it here. It’s easy and you can several methods provided by popmotion! 😃 Not only tween but spring to customize stiffness and damping.

With just this code I can animate the scale, opacity and still customize the transition time for both poses independently.

When I hover the Square I want it to scale to 2 and the opacity to 1 and, all of this should be done in 1 second. When I stop hovering the square and it goes back into idle pose, I want it to go back to normal in 2 seconds.

Try it out in the example below!

Customizing transitions

Conclusion

I’ve shown you some examples of what you can do. Now it’s your turn to try this out!

• Their docs are very good!
• They have very easy to understand examples!
• Why the hell not?! 😏

If you happen to do something cool with react-pose please let me know and share down below in the responses! 💯 💯

If you want to stay updated on everything I write please feel free to Follow me!

João Miguel Cunha — Medium

And if you want to see more stuff from me I can recommend these posts:

Using toolkits to jumpstart React development 🛠

Let’s play with Chrome’s Face Detection API 👨 👩