Parallax Brainstorming

parallax.jsx

const keyframes = {
   heading: ({ page, fromPx }) => ({
    [page.y - fromPx(50)]: {
      y: 30,
      opacity: 0
    },
    [page.y]: {
      y: 0,
      opacity: 1
    },
    [page.y + fromPx(50)]: {
      y: -30,
    },
   })
}

const App = () => (
  <Parallax>
    <Page>
      <Box h="200vh">
        <Item keyframes={keyframes.heading}>
          <Heading>Some Title</Heading>
        </Item>
      </Box>
    </Page>
    <Page>
      <Box h="100vh">

      </Box>
    </Page>
  </Parallax>
)