React Pose has been deprecated in favour of Framer Motion. Read the upgrade guide

FLIP

The FLIP technique, fully explained here, is a way of animating expensive, layout-breaking animations like width and top by using quick transforms.

Pose provides a couple of methods for performing FLIP:

1. Animate width/top/etc and adding flip: true to a pose
2. Via the PoseGroup component

In this tutorial, we'll take a look at each of these.

width/top

The problem with animating size and position properties is that they break layout. Recalculating layout is expensive, which can slow animations to below 60fps.

So, when you set a pose with flip: true and any of width, height, top, left, right, or bottom values, these will applied at the start of the animation. Pose will measure the size and position of the element before and after, and animate from one to the other using transform properties instead.

For instance, we can switch a div to fullscreen and back using the following config:

const Panel = posed.div({
  fullscreen: {
    width: '100vw',
    height: '100vh',
    transition: tween,
    flip: true
  },
  thumbnail: {
    width: 100,
    height: 100,
    transition: tween,
    flip: true
  }
});

PoseGroup

React Pose includes a component called PoseGroup.

When wrapping a group of posed components, it enables two things:

1. enter/exit poses
2. FLIP-powered re-ordering

When an item enters or exits the group, or changes position in it, all the other items automatically measure their position before the change and then FLIP into to the new position:

This all happens automatically. Open this CodePen template

At the top of the JS, create a new posed component, a list item:

const Item = posed.li()

Now, replace null in the render function of Example with:

(
  <ul className="sidepanel">
    <PoseGroup>
      {this.state.items.map(item => (
        <Item className="item" data-key={item} key={item} />
      ))}
    </PoseGroup>
  </ul>
);

This component is pre-set to shuffle the items every two seconds. Notice how, without even defining any animations, all the items automatically animate to their new home.

Plus, the flip pose is enabled. So we can define the animation they use to move position by changing Item to:

const { tween } = popmotion

const Item = posed.li({
  flip: {
    transition: tween
  }
})