A
 
t
r
u
l
y
 
s
i
m
p
l
e
 
a
n
i
m
a
t
i
o
n
 
l
i
b
r
a
r
y
 
f
o
r
 
R
e
a
c
t
,
 
R
e
a
c
t
 
N
a
t
i
v
e
,
 
a
n
d
 
V
u
e

Get started

Magic animations

Pose can create animations based on the properties being animated.

const Box = posed.div({
  left: { x: -100 },
  right: { x: 100 }
})

const Component = ({ position }) =>
  <Box pose={position} />

Animate anything

Numbers, units, colors, box shadows, radial gradients, SVG path definitions - Pose animates it all.

popped: {
  x: -10,
  y: -10,
  background: 'rgba(161, 0, 246, 1)',
  boxShadow: '10px 10px 20px rgba(161, 0, 246, 0.2)',
  transition: { duration: 700 }
}

Custom animations

Use the power of Popmotion or React Animated to create complex custom animations.

const Circle = posed.div({
  attention: {
    scale: 1.3,
    transition: {
      type: 'spring',
      stiffness: 200,
      damping: 0
    }
  }
})

Declarative

Pose's declarative API leaves your code squeaky clean and free of messy, brittle code.

({ isOpen }) =>
  <Component pose={isOpen ? 'open' : 'closed'} />

Orchestrate

With Pose, coordinating animations across multiple components is as easy as animating just one.

const Parent = posed.ul(config)
const Child = posed.li(childConfig)

({ items }) => (
  <Parent pose="open">
    {items.map(item => <Child />)}
  </Parent>
)

Interactivity

Hovering, dragging, pressing, focusing. It's all just a prop away.

Drag
const Box = posed.div({
  hoverable: true,
  draggable: 'x',
  dragBounds: { left: '-100%', right: '100%' },
  init: { scale: 1 },
  hover: { scale: 1.2 },
  drag: { scale: 1.1 }
})

Passive values

Link values to the status of other values on the same poser or their parent.

Drag
// React, Vue & vanilla use Popmotion's functional pipelines
passive: {
  opacity: ['x', interpolate(
    [-200, -100, 100, 200],
    [0, 1, 1, 0]
  )]
}

// React Native uses React Animated's interpolate function
passive: {
  opacity: ['x', {
    inputRange: [-200, -100, 100, 200],
    outputRange: [0, 1, 1, 0]
  }]
}

Awesome with React DOM

The freedom to use any animation, automatic child binding, FLIP-enhanced enter/exit transitions and more.

// PoseGroup currently React DOM only

const Item = posed.li()

const List = ({ items }) => (
  <ul>
    <PoseGroup>
      {items.map(item => <Item key={item.key} />)}
    </PoseGroup>
  </ul>
)

Pose is a continuing project to simplify the creation of fluid and playful interfaces.

Get started