FLIP

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

In Pose for Vue, performing a FLIP animation is as simple as providing a pose the flip: true property.

javascript

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

Click on this box to see it in action: