⚡Frontend

Animationen mit Framer Motion einbauen

Smooth Animations mit Framer Motion in React

Statische Seiten wirken langweilig. Mit Framer Motion bringst du in unter 5 Minuten professionelle Animationen in deine App -- ohne CSS-Gefummel.

Pro-Tip — Der schnelle Weg

Nutze AnimatePresence fuer Exit-Animationen. Ohne AnimatePresence verschwinden Elemente einfach -- mit AnimatePresence faden sie smooth raus.

Seite 1

Framer Motion installieren

Installiere die Library in deinem Next.js Projekt.

npm install framer-motion

motion-Komponente verwenden

Ersetze dein normales HTML-Tag durch eine motion-Variante und definiere die Animation.

import { motion } from "framer-motion";

export default function Card() {
return (
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.4 }}
className="p-6 bg-white rounded-xl shadow"
>
<h2>Willkommen</h2>
</motion.div>
);
}

Hover- und Tap-Animationen

Fuer interaktive Elemente wie Buttons kannst du whileHover und whileTap nutzen.

<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
className="px-6 py-3 bg-blue-600 text-white rounded-lg"
>
Klick mich
</motion.button>

Staggered Children Animation

Animiere eine Liste, bei der jedes Element nacheinander erscheint.

const container = {
hidden: {},
show: { transition: { staggerChildren: 0.1 } },
};

const item = {
hidden: { opacity: 0, x: -20 },
show: { opacity: 1, x: 0 },
};

<motion.ul variants={container} initial="hidden" animate="show">
{items.map((i) => (
<motion.li key={i} variants={item}>{i}</motion.li>
))}
</motion.ul>

Seite 2

Warum das funktioniert

Animationen erhoehen die wahrgenommene Qualitaet deiner App enorm
Framer Motion nutzt die GPU und laeuft dadurch butterweich
Deklarative API statt imperativer CSS-Keyframes spart massiv Zeit

Tipps

Verwende layout-Prop fuer automatische Layout-Animationen bei Positionsaenderungen
Halte Animationen kurz (0.2-0.5s) -- laengere fuehlen sich traege an
useInView von framer-motion triggert Animationen erst beim Scrollen ins Sichtfeld

Seite 3

Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen