React Academy · Lektion

Motion-komponenter och grundläggande animationer

Ersätt div med motion.div och använd propsen animate, initial och exit för enkla animationer.

Lektion 1 av 414 steg

Motion-komponenter och grundläggande animationer är en gratis lektion i React Academy på CoddyKit. Detta är lektion 1 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för React Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Academy innehåller totalt 4 lektioner.

Vad är Framer Motion?

Framer Motion är ett React-bibliotek för animationer. Ersätt HTML-element med motsvarande motion.*-element för att lägga till deklarativa animationer via props i stället för CSS-keyframes.

Installation

Installera Framer Motion och importera motion från biblioteket.

npm install framer-motion

import { motion } from 'framer-motion';

Din första animation

Ersätt <div> med <motion.div> och lägg till propsen initial, animate och transition.

<motion.div
  initial={{ opacity: 0, y: -20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.4 }}
>
  Hello, Framer Motion!
</motion.div>

Propen initial

initial definierar animationens startläge — var elementet befinner sig innan det animeras till 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 }}
/>

Propen animate

animate definierar målläget. Framer Motion interpolerar mellan initial och animate med hjälp av fjäderfysik eller en angiven easing.

<motion.h1
  initial={{ opacity: 0 }}
  animate={{ opacity: 1, color: '#4f46e5' }}
  transition={{ duration: 0.6, ease: 'easeOut' }}
>
  Welcome
</motion.h1>

Övergångsalternativ

Propen transition styr hur animationen rör sig: duration, ease, delay, type ('spring' | 'tween' | 'inertia').

transition={{
  type: 'spring',
  stiffness: 300,
  damping: 20,
  delay: 0.2,
}}

Keyframes i animate

Skicka en array till ett valfritt animerat värde för att skapa keyframe-animationer som passerar genom flera tillstånd.

<motion.div
  animate={{ x: [0, 30, 0] }}
  transition={{ duration: 1, repeat: Infinity, ease: 'easeInOut' }}
/>

Hover- och trycktillstånd

whileHover och whileTap definierar animerade tillstånd för hover- och tryckinteraktioner och återgår automatiskt när gesten avslutas.

<motion.button
  whileHover={{ scale: 1.05, backgroundColor: '#4f46e5' }}
  whileTap={{ scale: 0.95 }}
  style={{ backgroundColor: '#6366f1' }}
>
  Press me
</motion.button>

Animera vid scrollning med inView

Använd propen whileInView för att starta en animation när elementet rullas in i viewporten.

<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>

Propen exit med AnimatePresence

exit definierar animationen när en komponent avmonteras. Den fungerar endast när komponenten är omsluten av <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 för imperativ styrning

useAnimate() returnerar en scope-ref och en animate-funktion för programmatisk styrning av animationer utanför det deklarativa propsystemet.

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>;
}

Minska rörelse

Respektera användarens inställning för minskad rörelse med hooken useReducedMotion().

import { useReducedMotion } from 'framer-motion';

function AnimatedCard() {
  const shouldReduce = useReducedMotion();
  return (
    <motion.div
      animate={{ opacity: 1, y: shouldReduce ? 0 : -20 }}
    />
  );
}

Snabbkontroll

Vilken prop i Framer Motion definierar det animationstillstånd som en komponent ska nå, alltså dess mål?

Besvara frågan i den interaktiva lektionen

Sammanfattning

Ersätt HTML-element med motsvarande motion.*-element. Använd initial för startläget, animate för målläget, transition för tidsinställningar, whileHover/whileTap för gester och whileInView för scrollstyrda animationer.

Gratis att börja

Lär dig React med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 88
Lektioner: 324

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Motion-komponenter och grundläggande animationer” gratis?

Ja – hela texten till ”Motion-komponenter och grundläggande animationer” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i React Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i React Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Motion-komponenter och grundläggande animationer”?

Ersätt div med motion.div och använd propsen animate, initial och exit för enkla animationer. Ni övar på React Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig React Academy?

Du behöver inga förkunskaper. Utbildningen i React Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.

Hur lång tid tar lektionen ”Motion-komponenter och grundläggande animationer”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här React Academy-lektionen?

Ja. Varje React Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Motion-komponenter och grundläggande animationer
Variants för samordnade animationer
Gestanimationer: hover, tap och drag
Layoutanimationer och AnimatePresence

← Tillbaka till React Academy