React Pose has been deprecated in favour of Framer Motion. Read the upgrade guide
Get started
Pose is a declarative motion system that combines the simplicity of CSS transitions with the power and flexibility of JavaScript.
In this series of tutorials, we’ll learn how to use Pose for React DOM. We’ll gradually introduce each of its features, starting with this simple opacity
animation:
Setup
The easiest way to play around with Pose is to fork this CodeSandbox playground.
For local development, all installation options can be found on the install page.
The “Hello World” animation
In Pose for React, we create animated components by importing posed
from react-pose
:
import posed from 'react-pose';
posed
can create animated versions of any HTML or SVG element. Use it to create a div
:
const Box = posed.div();
Change the render
function to return an instance of Box
instead of div
:
return <Box className="box" />;
With Pose, we define possible states, or poses, that the Box
can be in. It looks a lot like CSS:
const Box = posed.div({
visible: { opacity: 1 },
hidden: { opacity: 0 }
});
Now to animate Box
between its visible
and hidden
poses, we just pass it a pose
prop:
return (
<Box
className="box"
pose={this.state.isVisible ? 'visible' : 'hidden'}
/>
);
The box is now animating between the two poses!
But wait, where did we define the animation?
Short answer: we didn’t.
More helpful answer: By default, Pose doesn’t require you to explicitly define the animations used to transition between two states.
Instead, it automatically creates an animation based on the properties being animated.
These animations have been designed to create snappy and playful interfaces. Physical motion uses spring
to maintain velocity between animations, whereas properties like opacity
use a tween
.
However, there will always be situations where we want greater control. For that, we can define custom transitions.