animating a modal with data-driven-motion

place.js

import React from 'react'
import styled from 'emotion/react'
import { Motion } from 'data-driven-motion'

import theme from '../../lib/theme'
import Place from '../place'

const Backdrop = styled.div`
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  margin: auto;
  background: rgba(0, 0, 0, .65);
  z-index: 10;
  overflow: hidden;
`

const PlaceWrapper = styled.div`
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 11;
  transition: all 200ms ease;

  @media (min-width: ${theme.bp[1]}em) {
    top: 10vh;
    left: 10vw;
    width: 80vw;
    height: 80vh;
  }
`

const STIFF_SPRING = { stiffness: 1250, damping: 50, precision: 0.1 }

export default class extends React.Component {
  dismiss (e) {
    if (this.shim === e.target || this.placeWrap === e.target) {
      if (this.props.onDismiss) {
        this.props.onDismiss()
      }
    }
  }

  render () {
    const {
      open,
      start = { top: 0, left: 0, right: 0, bottom: 0 },
      place
    } = this.props

    return (
      <Motion
        data={open && place ? [place] : []}
        component={<div />}
        getKey={() => 'modal'}
        onComponentMount={() => ({
          top: start.top,
          left: start.left,
          right: start.right,
          bottom: start.bottom,
          opacity: 0
        })}
        onRender={(data, i, spring) => ({
          top: spring(0, STIFF_SPRING),
          left: spring(0, STIFF_SPRING),
          right: spring(0, STIFF_SPRING),
          bottom: spring(0, STIFF_SPRING),
          opacity: spring(1, STIFF_SPRING)
        })}
        onRemount={() => ({
          top: start.top,
          left: start.left,
          right: start.right,
          bottom: start.bottom,
          opacity: 0
        })}
        onUnmount={(config, spring) => ({
          top: spring(start.top, STIFF_SPRING),
          left: spring(start.left, STIFF_SPRING),
          right: spring(start.right, STIFF_SPRING),
          bottom: spring(start.bottom, STIFF_SPRING),
          opacity: spring(0, STIFF_SPRING)
        })}
        render={(key, data, style) => {
          return (
            <Backdrop
              key={key}
              style={style}
              innerRef={node => (this.shim = node)}
              onClick={e => this.dismiss(e)}
            >
              <PlaceWrapper
                style={{
                  'background-color': `rgba(255, 255, 255, ${Math.max(0.87, style.opacity)})`
                }}

                innerRef={node => (this.placeWrap = node)}
                className='photo'
              >
                <Place place={data} />
              </PlaceWrapper>
            </Backdrop>
          )
        }}
      />
    )
  }
}