Mind-blowingly Easy React Animations
MIND FREAKIN’ BLOWN
A Journey into Animations
At Hexient Labs, we’ve been writing React and React Native apps for a couple years. In all this time, we’ve been searching for the “killer” solution to animations. Well friends, the time has come.
Pose by Popmotion
If you like playful web animations, you’ve probably heard of Popmotion. Just last week I stumbled upon another project by Popmotion named Pose.
Pose gives developers access to the exact same declarative motion API as Popmotion, in the context of React.
An Example
// AnimatedBoxes.js
import React, { Component, Fragment } from 'react'
import posed from 'react-pose'// Create a `Box` component with different animated states
// The states are `active` and `inactive` with different style props
// Note: We only determine the different states, not easings
// Note: Pose comes with sensible, playful defaults for animations
const Box = posed.div({
active: {
opacity: 1,
scale: 1.1,
y: -8,
},
inactive: {
opacity: 0.8,
scale: 1,
y: 0
},
})// Export the component
export default class AnimatedBoxes extends Component {
this.state = { activeBox: null } _activate = activeBox => this.setState({ activeBox }) _deactivate = () => this.setState({ activeState: null }) render() {
const { activeBox } = this.state return (
<Fragment>
<Box
pose={activeBox === 0 ? 'active' : 'inactive'}
onMouseEnter={() => this._activate(0)}
onMouseLeave={this._deactivate}
/>
<Box
pose={activeBox === 1 ? 'active' : 'inactive'}
onMouseEnter={() => this._activate(1)}
onMouseLeave={this._deactivate}
/>
</Fragment>
)
}
}
You can see in the example above how seamlessly Pose fits into the React declarative paradigm.
Now, this may not look too impressive, but to us, the magic is the in the sensible, playful default easings and springs that Pose uses. You can interact with the beautiful result of our minimalist code below.
It really is 😍 🔥 🌮. You can find more docs on Pose and creating beautiful, staggered animations in the API Documentation.
