Amazing React animation with react-pose
Dead easy animation with similar API to styled-components
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.
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.
It’s this easy! 😃 💯 Try it out in the example below!
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!
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! 😃 💯
Fourth example — Applying FLIP Technique
The FLIP technique, fully explained here, is a way of animating expensive, layout-breaking animations like
width
andtop
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.
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.
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!
If you want to stay updated on everything I write please feel free to Follow me!
And if you want to see more stuff from me I can recommend these posts: