animation.js

animated.DialogOverlay = animated(DialogOverlay)
animated.DialogContent = animated(DialogContent)

function NewPostDialog({ date, show, onDismiss }) {
  const rootRef = useRef(null)

  const transitions = useTransition(show, null, {
    from: { opacity: 0, y: -10, blur: 0 },
    enter: { opacity: 1, y: 0, blur: 8 },
    leave: { opacity: 0, y: -10, blur: 0 },
    onFrame: (item, state, props) => {
      if (item) {
        if (!rootRef.current) {
          rootRef.current = document.getElementById("root")
        }
        rootRef.current.style.filter = `blur(${props.blur}px)`
      }
    }
  })

  return transitions.map(
    ({ item: show, key, props: { opacity, y } }) =>
      show && (
        <animated.DialogOverlay
          key={key}
          style={{ opacity }}
          onDismiss={onDismiss}
        >
          <animated.DialogContent
            style={{
              transform: y.interpolate(y => `translate3d(0px, ${y}px, 0px)`)
            }}
          >
            <NewPost date={date} />
            <button
              className="NewPostDialog-close icon-button"
              onClick={onDismiss}
            >
              <FaTimes aria-label="Close new post dialog" />
            </button>
          </animated.DialogContent>
        </animated.DialogOverlay>
      )
  )
}