Componenti Motion e animazioni di base
Sostituisca div con motion.div e utilizzi le props animate, initial ed exit per animazioni semplici.
Componenti Motion e animazioni di base è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.
Che cos'è Framer Motion?
Framer Motion è una libreria di animazioni per React. Sostituisca gli elementi HTML con i relativi equivalenti motion.* per aggiungere animazioni dichiarative tramite props invece dei keyframe CSS.
Installazione
Installi Framer Motion e importi motion da essa.
npm install framer-motion
import { motion } from 'framer-motion';La prima animazione
Sostituisca <div> con <motion.div> e aggiunga le props initial, animate e transition.
<motion.div
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.4 }}
>
Hello, Framer Motion!
</motion.div>La prop initial
initial definisce lo stato iniziale dell'animazione, ovvero il punto da cui parte l'elemento prima di animarsi verso animate.
// Fade in from left
<motion.div
initial={{ opacity: 0, x: -50 }}
animate={{ opacity: 1, x: 0 }}
/>
// Scale up from center
<motion.button
initial={{ scale: 0 }}
animate={{ scale: 1 }}
/>La prop animate
animate definisce lo stato obiettivo. Framer Motion interpola tra initial e animate utilizzando la fisica delle molle o un easing specificato.
<motion.h1
initial={{ opacity: 0 }}
animate={{ opacity: 1, color: '#4f46e5' }}
transition={{ duration: 0.6, ease: 'easeOut' }}
>
Welcome
</motion.h1>Opzioni di transizione
La prop transition controlla il movimento dell'animazione: duration, ease, delay, type ('spring' | 'tween' | 'inertia').
transition={{
type: 'spring',
stiffness: 300,
damping: 20,
delay: 0.2,
}}Keyframe in animate
Passi un array a qualsiasi valore animato per creare animazioni basate su keyframe che attraversano più stati.
<motion.div
animate={{ x: [0, 30, 0] }}
transition={{ duration: 1, repeat: Infinity, ease: 'easeInOut' }}
/>Stati di hover e tap
whileHover e whileTap definiscono gli stati animati per le interazioni di hover e pressione, tornando automaticamente allo stato precedente al termine del gesto.
<motion.button
whileHover={{ scale: 1.05, backgroundColor: '#4f46e5' }}
whileTap={{ scale: 0.95 }}
style={{ backgroundColor: '#6366f1' }}
>
Press me
</motion.button>Animare durante lo scorrimento con inView
Utilizzi la prop whileInView per attivare un'animazione quando l'elemento entra nell'area visibile.
<motion.section
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, amount: 0.3 }}
transition={{ duration: 0.5 }}
>
<h2>Revealed on scroll</h2>
</motion.section>La prop exit con AnimatePresence
exit definisce l'animazione eseguita quando un componente viene smontato. Funziona solo se il componente è racchiuso in <AnimatePresence>.
import { motion, AnimatePresence } from 'framer-motion';
<AnimatePresence>
{isVisible && (
<motion.div
key="modal"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0, scale: 0.95 }}
/>
)}
</AnimatePresence>useAnimate per il controllo imperativo
useAnimate() restituisce un ref scope e una funzione animate per controllare programmaticamente le animazioni al di fuori del sistema dichiarativo basato sulle props.
import { useAnimate } from 'framer-motion';
function ShakeButton() {
const [scope, animate] = useAnimate();
const handleClick = async () => {
await animate(scope.current, { x: [-10, 10, -10, 0] }, { duration: 0.3 });
};
return <motion.button ref={scope} onClick={handleClick}>Shake</motion.button>;
}Ridurre il movimento
Rispetti la preferenza dell'utente per la riduzione del movimento con l'hook useReducedMotion().
import { useReducedMotion } from 'framer-motion';
function AnimatedCard() {
const shouldReduce = useReducedMotion();
return (
<motion.div
animate={{ opacity: 1, y: shouldReduce ? 0 : -20 }}
/>
);
}Verifica rapida
Quale prop di Framer Motion definisce lo stato dell'animazione che un componente deve raggiungere, cioè il suo obiettivo?
Riepilogo
Sostituisca gli elementi HTML con gli equivalenti motion.*. Utilizzi initial per lo stato iniziale, animate per l'obiettivo, transition per la temporizzazione, whileHover/whileTap per i gesti e whileInView per le animazioni attivate dallo scorrimento.
Domande Frequenti
La lezione «Componenti Motion e animazioni di base» è gratuita?
Sì — il testo completo di «Componenti Motion e animazioni di base» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.
Cosa imparerò in «Componenti Motion e animazioni di base»?
Sostituisca div con motion.div e utilizzi le props animate, initial ed exit per animazioni semplici. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare React Academy?
Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.
Quanto tempo richiede la lezione «Componenti Motion e animazioni di base»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione React Academy?
Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Componenti Motion e animazioni di base
- Variants per animazioni orchestrate
- Animazioni con gesture: hover, tap e drag
- Animazioni di layout e AnimatePresence