Framer Motion: animace které dávají webu život

Statický web je mrtvý web. Jasně, obsah je král — ale plynulá animace je ten neviditelný detail, který rozhoduje jestli web působí profesionálně nebo jako školní projekt z roku 2015.

Dneska jsem přidal Framer Motion na celý airepublic.cz. Tady je co jsem se naučil.

Proč Framer Motion?

CSS animace umí hodně. Ale jakmile potřebujete:

• Gesta — drag, pinch, hover s fyzikou
• Layout animace — plynulé přeuspořádání elementů
• AnimatePresence — animace při odchodu z DOM
• Scroll-linked — animace řízené pozicí scrollu
• Spring physics — realistické pružinové pohyby

...tak CSS nestačí. Framer Motion tohle všechno řeší jedním API.

Instalace

npm install framer-motion

Hotovo. Žádná konfigurace, žádné pluginy. Funguje s Next.js 15 out of the box.

Základní vzory

Fade-in při scrollu

Nejjednodušší upgrade pro jakýkoliv web. Element se plynule objeví když na něj uživatel nascrolluje:

import { motion } from 'framer-motion'

<motion.div
  initial={{ opacity: 0, y: 24 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true }}
  transition={{ duration: 0.6 }}
>
  {/* obsah */}
</motion.div>

Stagger efekt na kartách

Karty se objevují jedna po druhé — kaskádový efekt co vypadá skvěle:

<motion.div
  initial="hidden"
  whileInView="visible"
  variants={{
    visible: { transition: { staggerChildren: 0.1 } },
  }}
>
  {items.map((item) => (
    <motion.div
      key={item.id}
      variants={{
        hidden: { opacity: 0, y: 20 },
        visible: { opacity: 1, y: 0 },
      }}
    />
  ))}
</motion.div>

Spring animace

CSS ease-in-out je nudný. Spring fyzika dává animacím život:

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

Živé demo

Tohle je jen ochutnávka. Zkus si to:

Co jsem animoval na airepublic.cz

1. Karty článků a nástrojů — stagger fade-in při scrollu
2. Hlavičky stránek — plynulý entrance
3. Mobilní menu — AnimatePresence pro smooth open/close
4. Playground stránka — 8 interaktivních demo ukázek

Celá integrace zabrala jedno odpoledne. Většina práce = vytvoření znovupoužitelných komponent (FadeIn, StaggerGrid, PageHeader), které pak stačí jen zabalit kolem existujícího obsahu.

Tipy z praxe

'use client' co nejníž. Framer Motion potřebuje klientský JavaScript. Nezabalujte celou stránku — vytvořte malé client komponenty a server stránky jim jen předávají data.

viewport={{ once: true }} — animace se spustí jen jednou. Bez toho by se elementy animovaly pokaždé když na ně nascrollujete, což je otravné.

Spring > easing. Téměř vždy. Spring fyzika vypadá přirozeněji a nepotřebujete ladit timing funkce.

AnimatePresence pro exit animace. Bez toho element zmizí okamžitě. S tím můžete přidat plynulý odchod.

Verdikt

Framer Motion je must-have pro každý React projekt kde vám záleží na UX. API je intuitivní, výkon solidní, a výsledek je vidět okamžitě.

Největší překvapení? Jak málo kódu stačí k dramatickému zlepšení. Dva řádky motion.div a web najednou působí úplně jinak.

---

Všechny animace na tomhle webu běží na Framer Motion. Mrkni na Playground pro interaktivní ukázky.