Popmotion Pose

Declarative motion system for HTML, SVG & React

CSS simplicity meets Popmotion power

Zero-config animation

By default, Pose will figure out the animation based on the properties being animated.

const props = {
  left: { x: '100%' },
  right: { x: '-100%' }
}

const poser = pose(element, props)

poser.set('left')

Declarative

Pose's declarative API enforces the separation of business and animation logic.

// Vanilla
poser.set('open')

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

Custom animations

Use the power of Popmotion to create complex custom animations.

attention: {
  scale: 1.3,
  transition: (props) =>
    spring({ ...props, stiffness: 200, damping: 0 })
}

Orchestrate

Pose's parent-child system makes quick work of coordinating animations across multiple elements.

const parent = pose(element, props)
children.forEach(child => parent.addChild(child, childProps))

parent.set('open')

Interactivity

Draggable elements are just a prop away, with more options coming soon.

Drag
const props = {
  draggable: 'x',
  dragBounds: { left: '-100%', right: '100%' }
};

Passive values

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

Drag
const props = {
  draggable: 'x',
  passive: {
    opacity: ['x', interpolate(
      [-200, -100, 100, 200],
      [0, 1, 1, 0]
    )]
  }
}

FLIPpin' great

Slow flow-breaking animations are automatically converted to fast transforms. Plus, an imperative FLIP API allows the poser to respond to DOM operations.

await poser.set('childOut')
await poser.flip(() => {
  poser.clearChildren()
  parentElement.removeChild(parent.firstChild)
  parentElement.appendChild(newChild)
  poser.addChild(newChild, childProps)
})
poser.set('childIn')

Awesome with React

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

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.