25 esempi di Framer Motion (Motion for React) che girano dal vivo: fade, stagger, layout, elementi condivisi, modal, accordion, drag, avanzamento dello scroll, transizioni di pagina e reduced motion.
Framer Motion, ora pubblicato come Motion for React, anima qualsiasi elemento che sostituisci con un componente motion: imposta le prop initial, animate e transition. Le 25 ricette qui sotto girano dal vivo in questa pagina, ognuna con codice da copiare: entrate, stagger, drag, layout ed elementi condivisi, animazioni di uscita, avanzamento dello scroll, transizioni di pagina e reduced motion.
Installazione
Ogni demo qui è il codice che le sta accanto, in esecuzione nel tuo browser. Le ricette usano il pacchetto motion; se il tuo progetto usa ancora framer-motion, componenti e prop sono gli stessi e cambia solo il percorso di import.
Sì. La libreria è stata rinominata Motion e la parte React si importa da motion/react. Il pacchetto framer-motion è ancora pubblicato con la stessa API, quindi i tutorial più vecchi continuano a funzionare.
L'elemento deve essere un figlio diretto di AnimatePresence, avere una key unica e avere una prop exit. Se viene rimosso anche il genitore di AnimatePresence, non resta nulla da animare.
Anima height da 0 a "auto" su un elemento motion e imposta overflow a hidden. Motion misura l'altezza reale per te, cosa che le transizioni CSS non possono fare.
I componenti motion usano API del browser, quindi il file che li renderizza ha bisogno di "use client". Un server component può comunque renderizzare quel client component e passargli dei children.
No, se ti limiti a transform e opacity, che girano senza ricalcolare il layout. Grandi animazioni di layout e molti elementi animati insieme costano di più; testa su un telefono di fascia media e usa LazyMotion per ridurre il bundle.
Prop e hook usati in questa pagina
initial è il primo frame, animate è dove finisce. Non serve altro per un'entrata singola.
Muoversi con y usa un transform CSS, quindi l'elemento non spinge mai i vicini mentre si sposta.
Le variants sono stati con nome. Il genitore trasmette il suo stato ai figli e staggerChildren ritarda ogni figlio un po' più del precedente.
whileInView avvia l'animazione quando l'elemento entra nel viewport; once: true impedisce che si ripeta a ogni scroll.
Un array è un elenco di keyframe. times li distribuisce lungo la durata, da 0 a 1.
whileHover e whileTap animano verso uno stato finché dura il gesto, poi tornano indietro da soli.
dragConstraints può ricevere un ref a un elemento genitore, così l'elemento non può mai essere trascinato fuori.
Trascina su un asse, poi leggi offset e velocità in onDragEnd per decidere se la card se ne va o torna al suo posto.
Reorder.Group tiene l'array nello state e ti restituisce il nuovo ordine. Ogni Reorder.Item ha bisogno del valore che rappresenta.
Animare x attraverso alcuni keyframe dà la classica scossa. Attivala cambiando una key o chiamando animate da useAnimate.
Aggiungi layout e cambia dimensione o posizione con il normale CSS. Motion misura prima e dopo e anima la differenza con i transform.
Due elementi con lo stesso layoutId sono trattati come uno solo. Quando la sottolineatura viene renderizzata sotto una nuova tab, scivola fin lì.
React rimuove gli elementi all'istante. Avvolgerli in AnimatePresence mantiene montato un figlio in uscita finché la sua animazione exit non finisce.
Sfondo e pannello fanno il fade insieme; il pannello inoltre sale. Mantieni la vera semantica del dialog (role, focus, Escape) nel tuo codice.
Motion può animare fino a height: "auto", cosa che le semplici transizioni CSS non possono fare. overflow hidden impedisce al testo di debordare mentre si apre.
layout su ogni toast fa scorrere gli altri verso l'alto in modo fluido quando uno se ne va. popLayout fa smettere subito al toast in uscita di occupare spazio.
mode="wait" lascia che la vecchia pagina finisca di uscire prima che entri la nuova. La key deve cambiare con la route.
useScroll dà scrollYProgress da 0 a 1. Passa container per seguire un riquadro che scorre invece della finestra, e scala la barra di conseguenza.
useTransform mappa un motion value su un altro intervallo, così un livello può muoversi a una velocità diversa dallo scroll.
animate() può guidare un motion value. useTransform lo arrotonda, e renderizzare direttamente il motion value evita un render di React a ogni frame.
pathLength va da 0 a 1 su qualsiasi path, circle o line, ed è il modo più rapido per disegnare una spunta o una firma.
repeat: Infinity con un ease lineare dà una rotazione costante. Abbinalo a un testo visibile o per screen reader che dica cosa si sta caricando.
useAnimate restituisce un ref di scope e una funzione animate. Attendere ogni chiamata con await esegue i passaggi in ordine, e stagger distribuisce un passaggio su molti elementi.
Stiffness imposta quanto forte tira la molla, damping quanto velocemente si assesta. Un damping basso supera il bersaglio e oscilla.
MotionConfig reducedMotion="user" disattiva le animazioni di transform e layout per chi chiede al proprio sistema meno movimento, mantenendo i fade.
Un file template.tsx viene rimontato a ogni navigazione, a differenza di layout.tsx, quindi il suo passaggio da initial ad animate parte ogni volta che cambi pagina. Ha bisogno di "use client" perché usa motion.
Il componente m più LazyMotion carica solo le funzionalità che elenchi. domAnimation copre animazioni, variants, exit e gesti; domMax aggiunge drag e layout.
Preferisci un effetto senza JavaScript? Prova il
Rivedi
Ciao
Card
Pianifica
Progetta
Costruisci
Lancia
Scorri questo riquadro verso il basso.
Contenuto della sezione
Premimi
Pallina trascinabile
Card {n}
{card}: scorrimi via
Reimposta
Logo
Menu
Hero
Footer
Password (qui ogni risposta è sbagliata)
Accedi
Ingrandisci o rimpicciolisci il riquadro
Home
Prezzi
Blog
Nascondi
Mostra
Apri modal
Salvato
Chiudi
Cosa è incluso?
Hosting, un indirizzo gratuito e l'editor.
Bozza {n} salvata
Aggiungi toast
Benvenuto a casa.
Informazioni su questo studio.
Salutaci.
Paragrafo {n}. Continua a scorrere per vedere la barra riempirsi mentre leggi questo riquadro.
Caricamento
Uno
Due
Tre
Avvia
Sposta
Il tuo sistema chiede movimento ridotto: {answer}. Con sì, il riquadro qui sotto fa solo un fade.
Renderizzato con il componente m
Inizia gratis · Nessuna carta di credito richiesta