Как создать многостраничную анимацию с помощью Framer Motion и React-Router-Dom
![](/static/storage/31033264284808858908920916519033267530.png)
Анимация — это то, что превращает обычные сайты в захватывающее и незабываемое зрелище. Они придают вашему сайту индивидуальность и уникальность и заставляют посетителей восхищаться общей эстетикой.
В этой статье мы узнаем, как создавать анимацию, которая поражает воображение пользователей, с помощью Framer motion и React-Router-Dom.
Предварительные условия
Чтобы понять, что мы делаем в этой статье, вы должны обладать некоторыми знаниями о React, Framer motion и React-Router-DOM.
Чтобы лучше изучить Framer motion, вы можете изучить их документацию.
Node.js также должен быть установлен в вашей системе, и у вас должен быть рабочий редактор кода. Я буду использовать VS Code.
Создание проекта
Чтобы настроить наш проект, мы воспользуемся Vite для создания среды разработки React.
- Откройте терминал в VScode. Вы можете использовать Ctrl + обратную запятую (`).
- В терминале введите следующую команду:
npm create vite@latest
- Следуя подсказкам, назовите свой проект и выберите желаемый фреймворк. В нашем случае мы используем React. Это будет проект на JavaScript.
- Перейдите в каталог проекта и используйте
npm i
в терминале. - Чтобы запустить проект, используйте
npm run dev
. - Не забудьте очистить проект, удалив код в
App.js
и файлы CSS в папкеsrc
.
Как инициализировать Framer Motion и React-Router-Dom
- Чтобы установить Framer-motion в свой проект, откройте терминал и введите:
npm i framer-motion
- Чтобы установить React-Router-DOM в свой проект, откройте терминал и введите:
npm i react-router-dom
Как настроить компоненты и базовую маршрутизацию с помощью React-Router-DOM
Давайте настроим наши компоненты и страницы, к которым мы будем обращаться в этом проекте.
- В папке
src
создайте новую папку с именемcomponents
. - В эту папку мы добавим четыре файла с именами
Home.jsx
,About.jsx
,Projects.jsx
иNavbar.jsx
. - Внутри первых трех мы создадим функциональный компонент React. Измените содержимое тега
h1
в каждом компоненте:
const Home = () => {
return (
<div>
<h1>Home</h1>
</div>
)
}
export default Home
- В 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>
)
}
- Теперь перейдем к нашему файлу
index.js
илиmain.js
. Цель состоит в том, чтобы обернуть все наше приложение с помощьюBrowserRouter
, который обеспечит маршрутизацию внутри нашего приложения.
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>,
)
- Теперь в
App.js
мы завершим последний шаг нашей конфигурации. Мы импортируем наши компоненты, а также некоторые функции из React-Router-DOM и отрисуем наши компоненты. Используя функциюuseLocation
из 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
- Теперь мы можем добавить наш стиль в
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;
}
- После выполнения всех шагов ваше приложение должно выглядеть следующим образом:
![](/static/storage/81912451329172891038112191532849466930.png)
Как создавать переходы с помощью Framer Motion
Наконец, давайте создадим анимацию для переходов между страницами.
- Создайте файл в компонентах с именем
Box.jsx
и импортируйтеmotion
изframer-motion
. - Затем мы можем вернуть два div с именами классов (
classNames
)slide-in
иslide-out
, один для скольжения внутрь, а другой для скольжения наружу. - Мы вставим нашу анимацию в эти 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>
)
}
- Далее мы добавим стили в наш 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;
}
- Наконец, последний шаг – это использование
AnimatePresence
изframer-motion
в нашем файлеApp.js
и обертывание всего приложения вAnimatePresence
с установкой режима ожидания. Если вы хотите узнать больше об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
- В итоге наша работа должна выглядеть так, как показано на видео ниже:
Заключение
Создание многостраничной анимации с помощью Framer Motion и React-Router-Dom повышает удобство работы пользователей, обеспечивая плавные переходы.
Эта интеграция использует возможности анимации Framer Motion с функциями маршрутизации React-Router-Dom, что позволяет создавать динамичные, интерактивные веб-приложения.