Animaties zijn hetgeen dat een eenvoudige website omzet in een spannende en onvergetelijke ervaring. Ze geven aan uw website wat persoonlijkheid en uniekheid en laten de bezoeker de algehele esthetiek bewonderen.

Het is een no-brainer dat mensen mooie dingen houden. We allen houden van producten die mooi aan de ogen zijn.

In dit artikel zullen we leren hoe we animaties kunnen maken die gebruikers verbluffen met de hulp van Framer motion en React-Router-Dom.

Voorwaarden

om te kunnen volgen wat we in dit artikel doen, moet u wat kennis hebben van React, Framer motion en React-Router-DOM.

Om beter Framer motion te leren, kunt u hun documentatie bestuderen.

Node.js moet ook op uw systeem zijn geïnstalleerd en u moet een werkende code-editor hebben. Ik zal VS Code gebruiken.

Hoe u het project opzet

Om ons project op te zetten, zullen we Vite gebruiken om ons React-ontwikkelingsomgeving in te stellen.

  1. Open het terminal in VScode. U kunt Ctrl + backtick(`) gebruiken

  2. In uw terminal, typ de volgende opdracht:

npm create vite@latest

  1. Volg de opdrachten om uw project te noemen en kies uw gewenste framework. In ons geval gebruiken we React. Dit zal een JavaScript-project zijn.

  2. Ga naar uw projectmap en gebruik npm i in de terminal.

  3. Om uw project te starten, gebruik npm run dev.

  4. Vergeet niet uw project schoon te maken door het code in App.js en uw CSS-bestanden in de src map te verwijderen.

Hoe u Framer Motion en React-Router-Dom initialiseert

  1. Om Framer-motion in uw project te installeren, open de terminal en voer in:
npm i framer-motion
  1. Om React-Router-DOM in uw project te installeren, open de terminal en voer in:
npm i react-router-dom

Hoe u Components opzet en Basic Routing met React-Router-Dom

Laat ons onze components instellen en de pagina’s die we voor dit project zullen routeren.

  1. Maak in src een nieuwe map aan genaamd components.

  2. We zullen in deze map vier bestanden toevoegen met de namen Home.jsx, About.jsx, Projects.jsx en Navbar.jsx.

  3. In de eerste drie zullen we een React functional component aanmaken. Wijzig de inhoud van de h1 tag in elke component:

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

 export default Home
  1. In de Navbar moeten we Link importeren van React-Router-DOM om anchor elementen te maken. We moeten vervolgens een container aanmaken die ons logo en navigatie knoppen bevat. Het logo zal de punten naar onze index pagina linken.
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. Nu gaan we naar ons index.js of main.js bestand. Het doel is om onze gehele app te verpakken in BrowserRouter wat ons routing binnen onze applicatie zal activeren.
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. Nu in App.js zullen we de laatste stap van onze configuratie voltooien. We zullen onze componenten importeren, en enkele functies van React-Router-DOM en onze componenten renderen. Door useLocation functie van React-Router-DOM te gebruiken, kunnen we de huidige locatie van de routes instellen door de key op de huidige pad te zetten.
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. Nu kunnen we onze stijling toevoegen in 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. Na het volgen van alle stappen zou uw app er ongeveer zo uit moeten zien:

geschikt voor opmaken pagina zonder animatie

Hoe u transities kunt maken met behulp van Framer Motion

Telkens weergaan we onze animaties voor de transitie tussen pagina’s aanmaken.

  1. Maak een bestand in de map components aan en importeer motion uit framer-motion.

  2. We kunnen dan twee div’s teruggeven, met classNames van slide-in en slide-out, een voor glijden binnen en een voor glijden uit.

  3. We plakken onze animatie in deze div’s met behulp van 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. Vervolgens voegen we onze stijling toe in ons CSS-bestand voor slide-in en slide-out in ons 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. Tot slot is de laatste stap om AnimatePresence van framer-motion in ons App.js-bestand te gebruiken en de gehele App in AnimatePresence te plakken en de modus in te stellen op wait. Als u meer wilt leren over AnimatePresence, bezoek de documenten van 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. Tot slot zou ons werk eruit moeten zien als in het onderstaande video:

Conclusie

Het maken van multi-paginaanimaties met Framer Motion en React-Router-Dom verbetert de gebruikerservaring door middel van vloeiende transities.

Deze integratie maakt gebruik van de animatiescapabilitaten van Framer Motion samen met de routingfuncties van React-Router-Dom, resulterend in dynamische, interactieve webapplicaties.