Animations-Bibliothek

Framer Motion Beispiele

Alle verfügbaren Animationsmuster auf einen Blick – direkt im Browser ausprobieren.

initial / animate

Wird beim ersten Laden ausgeführt – ideal für Hero-Bereiche und Überschriften.

Einblenden

Von unten

Von links

<motion.div
  initial={{ opacity: 0, y: 40 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ delay: 0.2, duration: 0.6 }}
>

whileInView

Animation startet erst wenn das Element sichtbar wird – perfekt für lange Seiten.

Karte 1 – scrolle um die Animation zu sehen

Karte 2 – scrolle um die Animation zu sehen

Karte 3 – scrolle um die Animation zu sehen

Karte 4 – scrolle um die Animation zu sehen

<motion.div
  initial={{ opacity: 0, scale: 0.9 }}
  whileInView={{ opacity: 1, scale: 1 }}
  viewport={{ once: true }}
  transition={{ delay: 0.1 }}
>

whileHover / whileTap

Interaktive Animationen – hover über die Karten oder klicke darauf.

Hover: Skalieren

Hover: Rotieren

Hover: Heben · Tap (0×)

<motion.div
  whileHover={{ scale: 1.05 }}
  whileTap={{ scale: 0.95 }}
  transition={{ type: "spring", stiffness: 300 }}
>

transition & Stagger

Kaskadierte Animationen – jedes Element erscheint mit leicht verzögertem Delay.

KI LeadfinderKI Sales AgentKI CRMKI Social MediaKI ChatbotKI Support

{items.map((item, i) => (
  <motion.div
    initial={{ opacity: 0, y: 20 }}
    whileInView={{ opacity: 1, y: 0 }}
    transition={{ delay: i * 0.12 }}
  />
))}

Kachel Flip

Hover über eine Kachel, um die Rückseite zu sehen – ideal für Feature-Cards oder Produktinfos.

KI Leadfinder

Automatisch Leads finden & qualifizieren

KI Sales Agent

Mehr Abschlüsse mit weniger Aufwand

KI Support Agent

Support-Fälle automatisch lösen

function FlipCard() {
  const [flipped, setFlipped] = useState(false);
  return (
    <div onMouseEnter={() => setFlipped(true)}
         onMouseLeave={() => setFlipped(false)}
         style={{ perspective: 1000 }}>
      <motion.div
        animate={{ rotateY: flipped ? 180 : 0 }}
        transition={{ duration: 0.6 }}
        style={{ transformStyle: "preserve-3d" }}
      >
        <div style={{ backfaceVisibility: "hidden" }} />
        <div style={{ backfaceVisibility: "hidden", transform: "rotateY(180deg)" }} />
      </motion.div>
    </div>
  );
}

AnimatePresence

Elemente beim Einblenden und Ausblenden animieren – z.B. für Modals oder Tabs.

Dieses Element erscheint und verschwindet mit einer flüssigen Animation!

<AnimatePresence>
  {visible && (
    <motion.div
      initial={{ opacity: 0, height: 0 }}
      animate={{ opacity: 1, height: "auto" }}
      exit={{ opacity: 0, height: 0 }}
    />
  )}
</AnimatePresence>

Portfolio-Karten (Hover-Expand)

Karten mit Titel, Kategorie und ausklappbarer Beschreibung – inspiriert von appliedAI.de.

Programm

Companion Partnership Programm

Gemeinsam stärker: Setzen Sie KI-Standards

Mehr erfahren →

Service & Beratung

KI Strategie & Betriebsmodell

Strategie für die KI von übermorgen

Mehr erfahren →

Service

KI-Entwicklung & Implementierung

Von der Idee zum fertigen Use Case

Mehr erfahren →

Programm

AI Agent Lighthouse Programm

Multi-Agenten-Systeme in die Anwendung bringen

Mehr erfahren →

function PortfolioCard({ item }) {
  const [hovered, setHovered] = useState(false);
  return (
    <motion.div
      onHoverStart={() => setHovered(true)}
      onHoverEnd={() => setHovered(false)}
    >
      <AnimatePresence>
        {hovered && (
          <motion.p
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: "auto" }}
            exit={{ opacity: 0, height: 0 }}
          >{item.desc}</motion.p>
        )}
      </AnimatePresence>
    </motion.div>
  );
}

Weitere Hover-Effekte

Glow, Underline, Shimmer, Magnetic und Spotlight – direkt ausprobieren.

✨ Glow-Effekt

📝 Underline Slide

✦ Shimmer-Effekt

🧲 Magnetic

🔦 Spotlight

🎨 Background Shift

// Glow
whileHover={{ boxShadow: "0 0 30px 6px rgba(14,165,233,0.4)" }}

// Shimmer: animierter Gradient-Streifen via translateX

// Magnetic: useMotionValue + mousemove offset

// Spotlight: mousemove → radial-gradient Background

Maskierungseffekte

Clip-Path, Gradient Mask und Text Reveal – CSS-Masken mit Framer Motion.

Clip-Path Reveal

Von links eingeblendet ✦

Scrolle raus und rein – Effekt wiederholt sich

Gradient Mask

Text mit weichen Kanten

Via WebkitMaskImage

Text Wipe Reveal – klicken

KI Manager Plattform

Vorher

Nachher ✦

Hover Wipe

// Clip-Path Reveal
initial={{ clipPath: "inset(0 100% 0 0 round 12px)" }}
whileInView={{ clipPath: "inset(0 0% 0 0 round 12px)" }}

// Gradient Mask
style={{ WebkitMaskImage: "linear-gradient(...)" }}

// Text Reveal (Wipe)
animate={{ clipPath: "inset(0 0% 0 0)" }}
initial={{ clipPath: "inset(0 100% 0 0)" }}