Анимации и делают обычные сайты захватывающими и незабываемыми. Они придают вашему сайту немного личности и уникальности и оставляют посетителя восхищенным в целом esthetic.

Есть несколько логичных, что люди любят красивые вещи. Мы все любим продукты, которые выглядят приятно для глаз.

В этой статье мы научимся создавать анимации, которые поражают пользователей с использованием движения Framer и React-Router-DOM.

Предварительные требования

Чтобы следовать за тем, что мы делаем в этой статье, вам следует иметь некоторое знание React, Framer motion и React-Router-DOM.

Чтобы лучше узнать Framer motion, вы можете изучить их документацию.

Node.js также должен быть установлен на вашем компьютере, и у вас должна быть рабочая редактор кода. Я буду использовать VS Code.

Как настроить проект

Чтобы настроить наш проект, мы будем использовать Vite для настройки разработческой среды React.

  1. Откройте терминал в VScode. Вы можете использовать Ctrl + backtick(`)

  2. В вашем терминале введите следующий запрос:

npm create vite@latest

  1. Следуйте указаниям и назовите ваш проект, а затем выберите пожалуйста желаемое ядро. В нашем случае мы используем React. Это будет проект на JavaScript.

  2. Перейдите в ваш директорий проекта и в терминале используйте npm i.

  3. Для запуска вашего проекта используйте npm run dev.

  4. Не забудьте очистить ваш проект, удалив код в App.js и ваши CSS-файлы в папке src.

Как инициализировать Framer Motion и React-Router-Dom

  1. Чтобы установить Framer-motion в вашем проекте, откройте терминал и введите:
npm i framer-motion
  1. Чтобы установить React-Router-DOM в вашем проекте, откройте терминал и введите:
npm i react-router-dom

Как настроить компоненты и базовое маршрутирование с React-Router-Dom

Давайте настроим компоненты нашего проекта и страницы, на которые мы будем маршрутизироваться.

  1. В src, создайте новую папку с именем components.

  2. Мы добавим четыре файла в этот каталог с именем Home.jsx, About.jsx, Projects.jsx и Navbar.jsx.

  3. Внутри первых трех нам нужно создать React functional component. Измените содержимое тэга h1 в каждом компоненте:

const Home = () => {
 return (
    <div>
     <h1>Home</h1>
    </div>
 )
 }

 export default Home
  1. В Navbar нам нужно импортировать Link из React-Router-DOM, чтобы создавать ссылки. Затем нам нужно создать контейнер, в котором будут находиться наш логотип и ссылки на навигацию. Логотип будет ссылаться на нашу индексную страницу.
import {Link} from "react-router-dom"

const Navbar () => {
 return (
     <div className="nav">
      <div className="logo">
         <Link className="nav-link" to="/">Lennythedev</Link>
     </div>
     <div>
        <div className="nav-links">
           <div className="nav-item">
            <Link className="nav-link" to="/">Home</Link>
           </div>
           <div className="nav-item">
            <Link className="nav-link" to="/">About</Link>
           </div>
           <div className="nav-item">
            <Link className="nav-link" to="/">Projects</Link>
           </div>
     </div>
     </div>
     </div>
  )
 }
  1. Теперь пойдем в наш index.js или main.js файл. Цель – обернуть всю нашу app с помощью BrowserRouter, чтобы habilitate routing в нашем приложении.
import React from "react"
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Router>
      <Routes>
        <Route path='/*' element={<App />} />
      </Routes>
    </Router>
  </React.StrictMode>,
)
  1. Теперь в App.js мы создадим последний шаг нашей настройки. Мы импортируем наши компоненты и некоторые функции из React-Router-DOM и отрендерим наши компоненты. Utilizing useLocation feature from React-Router-DOM, мы можем установить текущее местоположение маршрутов, установив ключ для текущего пути.
import './App.css'
import { Routes, Route, useLocation } from 'react-router-dom'
import NavBar from './components/NavBar';
import Home from './components/Home';
import Projects from './components/Projects';
import About from './components/About';

function App() {
  const location = useLocation();
  return (
    <>
       <NavBar />
       <AnimatePresence mode='wait'>
       <Routes location={location} key={location.pathname}>
        <Route index element={<Home />} />
        <Route path='/projects' element={<Projects />}/>
        <Route path='/about' element={<About />}/>
       </Routes>
       </AnimatePresence>
    </>
  )
}

export default App
  1. Теперь мы можем добавить наши стили в App.css:
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: white;
  font-family: "Fira Sans Condensed", sans-serif;
}

html,
body {
  font-family: "Fira Sans Condensed", sans-serif;
  background: rgb(0, 162, 255);
}

.nav {
  position: fixed;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.nav-links {
  display: flex;
  cursor: pointer;
}

.logo, .nav-item {
  margin: 2em;
  font-weight: 400;
  font-size: 1.5vw;
}

h1{
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-weight: 500;
  font-size: 10vw;
  line-height: 1;
  text-transform: uppercase;
}

a {
  text-decoration: none;
  font-weight: 500;
}
  1. После выполнения всех шагов ваше приложение должно выглядеть так:

стилизованную страницу без анимации

Как создавать переходы с использованием Framer Motion

Наконец, давайте создадим нашу анимацию для переходов между страницами.

  1. Создайте файл в компонентах с именем Box.jsx и import motion from framer-motion.

  2. Затем мы можем вернуть два div’a с classNames slide-in и slide-out для скольжения внутрь и снаружи.

  3. Мы вставляем нашу анимацию в эти div’ы с помощью framer-motion:

import { motion } from "framer-motion"

export default function Box() {
  return(
    <div>
     <motion.div
        className="slide-in"
        initial={{ scaleY: 0 }}
        animate={{ scaleY: 0 }}
        exit={{ scaleY: 1 }}
        transition={{ duration: 1, ease: [0.22, 1, 0.36, 1] }}
     />
     <motion.div
     className="slide-out"
        initial={{ scaleY: 1 }}
        animate={{ scaleY: 0 }}
        exit={{ scaleY: 0 }}
        transition={{ duration: 1, ease: [0.22, 1, 0.36, 1] }}
     />
    </div>
  )
}
  1. Затем мы добавляем наше оформление в наш CSS файл для slide-in и slide-out в нашем App.css
.slide-in {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #0f0f0f;
  transform-origin: bottom;
}

.slide-out {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  background: #0f0f0f;
  transform-origin: top;
}
  1. Наконец, последним шагом является использование AnimatePresence из framer-motion в нашем файле App.js и обертывание всего приложения в AnimatePresence и установка режима как wait. Если вы хотите узнать больше о AnimatePresence, посетите документацию framer-motion.
import './App.css'
import { Routes, Route, useLocation } from 'react-router-dom'
import NavBar from './components/NavBar';
import Home from './components/Home';
import Projects from './components/Projects';
import About from './components/About';
import { AnimatePresence } from 'framer-motion';

function App() {
  const location = useLocation();
  return (
    <>
       <NavBar />
       <AnimatePresence mode='wait'>
       <Routes location={location} key={location.pathname}>
        <Route index element={<Home />} />
        <Route path='/projects' element={<Projects />}/>
        <Route path='/about' element={<About />}/>
       </Routes>
       </AnimatePresence>
    </>
  )
}

export default App
  1. В конечном итоге, наша работа должна выглядеть также, как в видео ниже:

Заключение

Создание многостраничных анимаций с помощью Framer Motion и React-Router-Dom повышает пользовательский опыт, обеспечивая плавные переходы.

Эта интеграция использует возможности анимации Framer Motion вместе с функциями routing React-Router-Dom, чтобы создать динамичные, интерактивные веб-приложения.