[FEATURE]Small introduction to use it with page transitions, like pose had done

It would be great to get some realworld examples. When it"s production ready, we would like to see some real scenarios, like page transitions in use with react router dom.

` const AnimationSettings = { transition: { duration: 0.5 }, initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -20 }, };

const Routes = () => { const { location } = React.useContext(__RouterContext);

return ( <AnimatePresence {…AnimationSettings}> <Switch location={location}> <Route exact path="/" component={Dashboard} />

    <Route path="/board/:id" component={({ match }) => <BoardDetail boardId={match.params.id} />} />

    <Route path="/dashboard" exact component={Dashboard} />
    <Route path="/projects" exact component={Projects} />
    <Route path="/createboard" exact component={CreateBoard} />

    <Route path="/statistic/:id" component={({ match }) => <Statistic questionId={match.params.id} />} />
  </Switch>
</AnimatePresence>

); };

export default Routes; `

[cctoni]

Here is a working example:

import React from 'react';
import { Route, Switch, __RouterContext } from 'react-router-dom';
import { motion, AnimatePresence } from 'framer-motion';
import CreateBoard from '../components/CreateBoard/CreateBoard';

import Dashboard from '../views/Dashboard';
import BoardDetail from '../components/BoardDetail/BoardDetail';
import Statistic from '../components/Statistic/Statistic';
import Projects from '../views/Projects';

const Routes = ({ transitionType, damping, stiffness, duration, easing }) => {
  const { location } = React.useContext(__RouterContext);

  const animation = {
    initial: { opacity: 0 },
    active: {
      opacity: 1,
      transition: {
        delay: 0.3,
        when: 'beforeChildren',
        staggerChildren: 0.1,
      },
    },
    exit: { opacity: 0, y: 200 },
  };

  const transition =
    transitionType === 'spring' ? { type: 'spring', damping, stiffness } : { type: 'tween', duration, ease: easing };

  return (
    <AnimatePresence>
      <motion.div
        key={location.key}
        initial={animation.initial}
        animate={animation.active}
        exit={animation.exit}
        transition={transition}
        //positionTransition
      >
        <Switch location={location}>
          <Route exact path="/" component={Dashboard} />

          <Route path="/board/:id" component={({ match }) => <BoardDetail boardId={match.params.id} />} />

          <Route path="/dashboard" exact component={Dashboard} />
          <Route path="/projects" exact component={Projects} />
          <Route path="/createboard" exact component={CreateBoard} />

          <Route path="/statistic/:id" component={({ match }) => <Statistic questionId={match.params.id} />} />
        </Switch>
      </motion.div>
    </AnimatePresence>
  );
};

export default Routes;

And inside my board if could also do some nice staggering effects while loading in data:

import React from 'react';
import ProjectCard from '../components/ProjectCard/ProjectCard';
import { Grid } from '@material-ui/core';
import { gql } from 'apollo-boost';
import { useQuery } from '@apollo/react-hooks';
import { motion } from 'framer-motion';

const container = {
  hidden: { opacity: 1, scale: 0 },
  visible: {
    opacity: 1,
    scale: 1,
    transition: {
      delay: 0.3,
      when: 'beforeChildren',
      staggerChildren: 0.1,
    },
  },
};

const item = {
  hidden: { y: 20, opacity: 0 },
  visible: {
    y: 0,
    opacity: 1,
  },
};

const ALL_BOARDS = gql`
  query allBoards {
    allBoards: board {
      id
      name
    }
  }
`;

const Projects = () => {
  const { data, loading } = useQuery(ALL_BOARDS);

  if (loading) {
    return <div>Loading</div>;
  }

  return (
    <motion.div variants={container} initial="hidden" animate="visible">
      <Grid container spacing={4}>
        {data.allBoards.map(board => (
          <Grid item lg={3} sm={6} xl={3} xs={12} key={board.id}>
            <motion.div key={board.id} variants={item}>
              <ProjectCard projectId={board.id} projectName={board.name} />
            </motion.div>
          </Grid>
        ))}
      </Grid>
    </motion.div>
  );
};

export default Projects;

[ryanwiemer]

Here is a very basic example with Gatsby if anyone is interested:

https://github.com/ryanwiemer/gatsby-using-page-transitions