Page transition animation in framer motion (React)

Question

As title says i wanna do a page transition like https://allhero.co.jp with framer motion in React Js

i tried:

.anim-page{
    &,._red{
      position: fixed;
      top: 0;
      width: 100%;
      height: 100%;
      z-index:999;
    }
    &._black{
      background-color: black;
    }
    ._red{
      background-color: red;
    }
  }
//-------------------------------------
const page_anim = {
    red: {
      hidden: { scaleX: 0 },
      visible: {
        scaleX: [1, 0],
        transformOrigin: 'right',
        transition: { duration: 0.5, {delay:0.3} },
      },
    },
    black: {
      hidden: { right: '100%' },
      visible: {
        // skewX: ['-25deg', '0deg'],
        right: '0%',
        transition: { duration: 0.7 },
      },
    },
  }

// -----------------------------------
<motion.div
          className='anim-page _black'
          variants={page_anim.black}
          initial='hidden'
          animate='visible'
        >
          <motion.div className='_red' variants={page_anim.red}></motion.div>
        </motion.div>

it kinda looks like that, but i don't know if this is the proper right way of doing it and it doesn't look that much. Importantly i wanna make it reusable. i liked the feature that the black goes away when page is loaded

Answer 1

I think this is a gsap thing, but i did, not that great but i like it

AnimLoading.jsx

import { motion } from 'framer-motion'

import React from 'react'
const AnimLoading = () => {
  const page_anim = {
    red: {
      hidden: { scaleX: 0 },
      visible: {
        scaleX: [1, 0],
        transformOrigin: 'right',
        transition: { duration: 0.4, delay: 0.2 },
      },
    },
    black: {
      hidden: { right: '100%' },
      visible: {
        skewX: ['0deg', '-5deg', '0deg'],
        right: ['100%', '0%'],
        transition: { duration: 0.5 },
      },
      done: {
        right: '-100%',
        skewX: ['0deg', '-5deg', '0deg'],
        transition: { duration: 0.5 },
      },
    },
    text: {
      hidden: { opacity: 0 },
      visible: { opacity: 1, transition: { delay: 0.4 } },
      done: { opacity: 0 },
    },
  }

  return (
    <motion.div
      className='anim-page _black'
      variants={page_anim.black}
      initial='hidden'
      animate='visible'
      exit='done'
    >
      <motion.div className='_red' variants={page_anim.red}></motion.div>
      <motion.h1 variants={page_anim.text} className='text-norm light'>
        LOADING...
      </motion.h1>
    </motion.div>
  )
}

export default AnimLoading

bit of scss

.anim-page{
    &,._red{
      position: fixed;
      top: 0;
      width: 100%;
      height: 100%;
      z-index:999;
    }
    &._black{
      background-color: ${({ theme }) => theme.bg_light};
      box-shadow: 0 2px 7px ${({ theme }) => theme.shadow_1};
    }
    ._red{
      width: 70%;
      right: 0;
      background-color: ${({ theme }) => theme.bg_blue};
    }
    h1{
      line-height: 100vh;
      font-size:7vw;
      display: grid;
      place-items: center;
    }
  }

App.js

const route = location.pathname.split('/')[1]
const [animate, setAnimate] = useState(false)

  useEffect(() => {
    setAnimate(true)
    setTimeout(() => {
      setAnimate(false)
    }, 1000)
  }, [route])

<AnimatePresence>{animate && <AnimLoading />}</AnimatePresence>

I'm using React Router, this happens all the time route changes...