animation.js

const transitions = useTransition(
  { weeks, startDate },
  item => item.startDate,
  {
    from: { y: -100 },
    enter: { y: 0 },
    leave: { y: 100 },
    initial: null
  }
)
const transitionDirection = location.state && location.state.direction

const handleNav = (addOrSubDays, direction) => {
  const date = formatDate(addOrSubDays(startDate, 7 * 4), DATE_FORMAT)
  navigate(".", { state: { startDate: date, direction } })
}

const handleEarlierClick = () => handleNav(subDays, "earlier")
const handleLaterClick = () => handleNav(addDays, "later")

// later
<div className="Calendar_animation_overflow">
  {transitions.map(({ item, props: { y }, key }) => {
    if (!item) return null

    let transform = "translate3d(0px, 0%, 0px)"
    if (transitionDirection === "earlier") {
      transform = y.interpolate(y => `translate3d(0px, ${y}%, 0px)`)
    } else if (transitionDirection === "later") {
      transform = y.interpolate(y => `translate3d(0px, ${-y}%, 0px)`)
    }

    return (
      <animated.div
        key={key}
        className="Calendar_animation_wrapper"
        style={{ transform }}
      >
        {"..."}
      </animated.div>
    )
  })}
</div>