Блог

Как говорится в названии, я хочу сделать переход на страницу, например https://allhero.co.jp с движением фреймера в React Js

я пытался:

 .anim-page{
    amp;,._red{
      position: fixed;
      top: 0;
      width: 100%;
      height: 100%;
      z-index:999;
    }
    amp;._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>
 

это выглядит примерно так, но я не знаю, правильно ли это, и это выглядит не так уж и много. Главное, я хочу сделать его многоразовым.
мне понравилась функция, благодаря которой черный цвет исчезает при загрузке страницы

Я думаю, что это вещь gsap, но я сделал это, не так уж здорово, но мне это нравится

Анимация.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

 

немного scss

 .anim-page{
    amp;,._red{
      position: fixed;
      top: 0;
      width: 100%;
      height: 100%;
      z-index:999;
    }
    amp;._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 amp;amp; <AnimLoading />}</AnimatePresence>
 

Я использую маршрутизатор React, это происходит все время, когда меняется маршрут…