Back to Popmotion

Medium-style image zoom

packages/popmotion-pose/docs/examples/react/react-medium-style-image-zoom.md

8.7.1679 B
Original Source

Medium-style image zoom

By leveraging Pose's FLIP capabilities, and the applyAtStart and applyAtEnd properties, it becomes trivial to implement Medium-style image zooming.

javascript
const Frame = posed.div({
  zoomedOut: {
    applyAtEnd: { display: 'none' },
    opacity: 0
  },
  zoomedIn: {
    applyAtStart: { display: 'block' },
    opacity: 1
  }
});

const Image = posed.img({
  zoomedOut: {
    position: 'static',
    width: 'auto',
    height: 'auto',
    flip: true
  },
  zoomedIn: {
    position: 'fixed',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    flip: true
  }
});
<CodeSandbox height="700" id="rrjx477w3n" />