Framer Motion in Lovable nutzen – einfach prompten reicht (fast)

Die kurze Antwort

Ja – in den meisten Fällen reicht es wirklich, „nutze Framer Motion" zu prompten. Lovable kennt die Library, installiert sie automatisch, importiert die richtigen Komponenten und schreibt typsicheres TSX. Du musst weder npm install noch Imports selbst pflegen.

Aber: „Mach das schöner mit Animation" ist kein guter Prompt. Wenn du nur das sagst, bekommst du ein zufälliges Fade-in und bist enttäuscht. Der Hebel liegt im Wie du promptest, nicht im Setup.

Was Lovable für dich erledigt

• framer-motion ist im Stack vorgesehen – Lovable fügt das Package bei Bedarf automatisch hinzu.
• Imports (motion, AnimatePresence, useScroll, useTransform …) werden automatisch gesetzt.
• Tailwind-Klassen und motion.div werden korrekt kombiniert.
• SSR/Hydration-Themen (z. B. AnimatePresence mit mode="wait") erkennt Lovable in der Regel selbst.

Heißt konkret: Du musst weder die API kennen noch die Doku lesen, um saubere Animationen zu bekommen. Du musst nur präzise beschreiben, was passieren soll.

Der Prompt-Trick: Trigger, Bewegung, Timing

Gute Animation-Prompts haben drei Bestandteile:

1. Trigger – Wann passiert es? (On mount, on scroll, on hover, on state change)
2. Bewegung – Was bewegt sich wie? (Opacity, translate, scale, rotate)
3. Timing – Wie schnell, mit welchem Easing, ggf. Stagger?

Schlechter Prompt

„Animier die Hero-Section."

Ergebnis: ein generisches Fade-in. Funktioniert, aber langweilig.

Guter Prompt

„In der Hero-Section: Headline soll beim Mount von unten reinsliden (y: 40 → 0, opacity 0 → 1, duration 0.6s, ease out). Subline 0.15s später, gleicher Effekt. CTA-Button 0.3s später mit leichtem Scale (0.95 → 1). Nutze Framer Motion."

Ergebnis: ein durchdacht orchestrierter Auftritt – genau einmal beschrieben, dauerhaft im Code.

Drei Prompt-Vorlagen zum Kopieren und Einfügen

Diese Prompts kannst du 1:1 in Lovable pasten. Sie decken 80 % der Use Cases auf einer Landingpage ab.

1. Scroll-Reveal für Sections

Prompt (kopieren und in Lovable einfügen):

Wrap jede Hauptsektion auf der Landingpage in eine Framer Motion Komponente.

- Trigger: whileInView (wenn die Section in den Viewport scrollt)
- Bewegung: opacity 0 → 1, y: 24 → 0
- Timing: duration 0.5s, ease "easeOut"
- Viewport-Config: once: true, margin: "-100px"

Stelle sicher, dass die Animation nur einmal abspielt und nicht beim Zurückscrollen wiederholt wird.

Was Lovable daraus baut:

• Ein motion.section oder motion.div pro Hauptsektion
• initial={{ opacity: 0, y: 24 }}
• whileInView={{ opacity: 1, y: 0 }}
• viewport={{ once: true, margin: "-100px" }}
• transition={{ duration: 0.5, ease: "easeOut" }}

2. Stagger für Listen / Grids

Prompt (kopieren und in Lovable einfügen):

Die Feature-Cards im Grid sollen nacheinander erscheinen, wenn die Section in den Viewport kommt.

- Nutze Framer Motion mit staggerChildren: 0.08 im Parent
- Jede Card: opacity 0 → 1, y: 16 → 0
- Timing: duration 0.4s, ease "easeOut"
- Trigger: whileInView auf dem Parent-Container

Stelle sicher, dass die stagger-Animation nur einmal abspielt.

Was Lovable daraus baut:

• Ein Parent-motion.div mit variants für staggerChildren
• transition={{ staggerChildren: 0.08 }}
• Child-motion.divs mit variants={{ hidden: { opacity: 0, y: 16 }, visible: { opacity: 1, y: 0 } }}
• viewport={{ once: true }} auf Parent-Ebene

3. Hover-Microinteraction

Prompt (kopieren und in Lovable einfügen):

Pricing-Cards: bei Hover leichtes Lift und Schatten verstärken.

- Bewegung: y: -4, boxShadow verstärken (z.B. von shadow-lg zu shadow-2xl)
- Transition: Spring-Physics mit stiffness 300, damping 20
- Kein Exit-Animation nötig – Framer Motion springt zurück
- Nicht zu verspielt, professioneller Look

Was Lovable daraus baut:

• whileHover={{ y: -4, boxShadow: "..." }}
• transition={{ type: "spring", stiffness: 300, damping: 20 }}
• Kombination mit bestehenden Tailwind-Shadow-Klassen

Diese drei Patterns decken 80 % der Use Cases ab, die du auf einer Landingpage brauchst.

Wann es doch hakt – und wie du es löst

Gelegentlich passieren drei Dinge:

• Animation läuft nicht beim ersten Render → Prompt: „Stelle sicher, dass die Komponente client-seitig animiert und keine SSR-Hydration-Mismatches erzeugt."
• AnimatePresence zeigt keinen Exit → Prompt: „Wickle den bedingten Block in <AnimatePresence mode='wait'> und gib jedem Child eine stabile key-Prop."
• Layout springt → Prompt: „Nutze layout-Prop bzw. LayoutGroup, damit die Größenänderung sauber animiert."

Das sind die Klassiker. Wenn du sie als Folge-Prompt schickst, sind sie meistens in einem Turn behoben.

Wann du nicht Framer Motion nehmen solltest

• Reine CSS-Transitions (Hover-Color, Underline-Slide) – dafür reicht Tailwind. Lovable wählt das von selbst, wenn du nicht explizit „Framer Motion" sagst.
• Accordion / Dialog – die shadcn/Radix-Komponenten haben eigene Animationen. Nicht doppelt animieren.
• Komplexe Timeline-Choreografie über mehrere Komponenten hinweg – hier lohnt sich GSAP. Selten nötig auf einer normalen Marketing-Site.

Fazit

Framer Motion in Lovable ist kein Setup-Problem, sondern ein Prompt-Problem. Wer Trigger, Bewegung und Timing im Prompt benennt, bekommt in einem Turn das, wofür man früher zwei Stunden mit der Doku verbracht hat.

Kurz: Ja, du musst es nur prompten. Aber prompte präzise.

Du baust gerade selbst mit Lovable und willst tiefer rein? Schau dir den Vibeland Kickoff an – da bauen wir live mit Lovable, Claude und monday Vibe.