Le animazioni sono ciò che trasforma siti web semplici in esperienze emozionanti e inesorabili. Conferiscono al tuo sito web un po ‘di personalità e unicità e lasciano il visitatore ammirare l’estetica complessiva.

È ovvio che gli umani amano le cose belle. Tutti amiamo i prodotti che sembrano belli da vedere.

In questo articolo, impareremo come creare animazioni che stupiscono gli utenti grazie all’uso di Framer motion e React-Router-Dom.

Prerequisiti

Per poter seguire ciò che facciamo in questo articolo, dovresti avere una certa conoscenza di React, Framer motion e React-Router-DOM.

Per imparare meglio Framer motion, puoi studiare la loro documentazione.

Node.js dovrebbe anche essere installato sul tuo sistema, e dovresti avere un editor di codice funzionante. Userò VS Code.

Come Setupare il Progetto

Per setupare il nostro progetto userremo Vite per setupare il nostro ambiente di sviluppo React.

  1. Apri il terminale in VScode. Puoi usare Ctrl + backtick(`)

  2. Nel tuo terminale, digita il seguente comando:

npm create vite@latest

  1. Segui le indicazioni per dare un nome al tuo progetto e scegli il framework desiderato. In questo caso, stiamo usando React. Questo sarà un progetto JavaScript.

  2. Vai nella directory del tuo progetto e usa npm i nel terminale.

  3. Per avviare il tuo progetto usa npm run dev.

  4. Ricorda di pulire il tuo progetto eliminando il codice in App.js e i file CSS nella cartella src.

Come inizializzare Framer Motion e React-Router-Dom

  1. Per installare Framer-motion nel tuo progetto apri il terminale e digita:
npm i framer-motion
  1. Per installare React-Router-DOM nel tuo progetto apri il terminale e digita:
npm i react-router-dom

Come impostare componenti e routing di base con React-Router-DOM

Impostiamo i nostri componenti e le pagine di routing per questo progetto.

  1. In src, crea una nuova cartella chiamata components.

  2. Aggiungeremo quattro file in questa cartella chiamati Home.jsx, About.jsx, Projects.jsx e Navbar.jsx.

  3. All’interno dei primi tre, creeremo un componente funzionale React. Modifica il contenuto del tag h1 in ciascun componente:

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

 export default Home
  1. Nella Navbar, dobbiamo importare Link da React-Router-DOM per creare elementi di ancoraggio. Poi dobbiamo creare un contenitore che ospiti il nostro logo e i link di navigazione. Il logo collegherà i punti alla nostra pagina indice.
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. Ora andiamo nel nostro file index.js o main.js. L’obiettivo è di avvolgere l’intera app con BrowserRouter che abiliterà il routing all’interno della nostra applicazione.
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. Ora in App.js, completeremo l’ultimo passo della nostra configurazione. Importeremo i nostri componenti e alcune funzionalità da React-Router-DOM e renderizzeremo i nostri componenti. Utilizzando la funzionalità useLocation da React-Router-DOM, possiamo impostare la posizione corrente delle rotte impostando la chiave al percorso corrente.
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. Ora possiamo aggiungere il nostro stile 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. Dopo aver seguito tutti i passaggi la tua app dovrebbe assomigliare a questo:

pagina web stilizzata senza animazione

Come creare transizioni utilizzando Framer Motion

Finalmente, creiamo la nostra animazione per le transizioni tra pagine.

  1. Creare un file in components chiamato Box.jsx e import motion from framer-motion.

  2. Potremmo quindi ritornare due div, con le classNames di slide-in e slide-out, uno per lo scorrimento in entrata e uno per lo scorrimento in uscita.

  3. Inseriamo le nostre animazioni in questi div con l’aiuto di 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. Successivamente, aggiungiamo il nostro stile nel nostro file CSS per slide-in e slide-out in 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. Infine, l’ultimo passo è utilizzare AnimatePresence da framer-motion nel nostro file App.js e avvolgere l’intera App in AnimatePresence e impostare il modo come wait. Per imparare di più su AnimatePresence visitare le documentazioni di 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. Infine, il nostro lavoro dovrebbe avere lo stesso aspetto del video sottostante:

Conclusione

La creazione di animazioni a pagine multipli con Framer Motion e React-Router-Dom migliora l’esperienza utente fornendo transizioni fluide.

Questa integrazione sfrutta le capacità di animazione di Framer Motion insieme alle funzionalità di routing di React-Router-Dom, consentendo di creare applicazioni web dinamiche e interattive.