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.

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!

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!