Lottie je formát animací, který se ukládá jako JSON soubor místo videa nebo GIFu. Díky tomu je ostrý na jakékoli velikosti obrazovky a soubor zabere zlomek místa oproti klasickému videu.
Co přesně Lottie je?
Lottie vznikla z pluginu Bodymovin pro Adobe After Effects - grafik navrhne animaci v After Effects a plugin ji vyexportuje jako JSON kód, ne jako video. Prohlížeč nebo aplikace pak animaci vykreslí přímo z těchto dat.
Protože jde o vektorovou grafiku, ne bitmapu jako GIF nebo PNG, zvětšíte ji na celou obrazovku a hrany zůstanou ostré. Stejný soubor navíc běží beze změny na webu, v iOS appce, v Androidu i v UX frameworku typu React.
Jak se Lottie liší od GIFu nebo videa?
Hlavní rozdíl je velikost souboru. Typický Lottie soubor váží kolem 200 až 300 kB, u novějšího formátu dotLottie (komprimovaný balíček s příponou .lottie) klidně o desítky procent míň. Oproti GIFu jde o výrazně menší data - konkrétní násobek se liší zdroj od zdroje, ale rozdíl je citelný, hlavně na mobilu.
Druhý rozdíl je interaktivita. GIF prostě běží pořád dokola. Lottie animace umí zareagovat na hover, klik nebo scroll - třeba tlačítko, které se rozhýbe teprve když na něj najedete myší.
Kdy se Lottie hodí na firemní web?
Nejčastěji se používá tam, kde chcete jemný vizuální detail, ne velkou show: loading indikátor při načítání formuláře, animovaná ikonka u výhod produktu, drobná animace v hero sekci nebo mikro-interakce u tlačítek. Grafik ji připraví v After Effects, vy ji pak jen vložíte na web.
Lottie animace bývá jedna z drobností, které dodávám v rámci webu na míru - dolaďuju s ní detaily, které klasický web nemá. Podívejte se na tvorbu webu na míru →.
Kolik stojí práce s Lottie?
Nástroj LottieFiles, kde se animace tvoří a spravují, má free variantu pro testování a sdílení. Placené tarify k červenci 2026 startují na 19,99 dolarů za uživatele měsíčně při ročním předplatném, tarif pro týmy je 24,99 dolarů. Enterprise verze se řeší na poptávku. Ceny se mění, ověřte aktuální na webu LottieFiles.
Pokud chcete hotovou animaci na míru od grafika, počítejte orientačně s 45 až 150 dolary za jednodušší kus, u složitější custom animace až s 1500 dolary.
Jaké má Lottie limity?
Ne každému uživateli dělá pohyb na obrazovce dobře - lidem s vestibulárními poruchami může pohybující se prvek způsobit závrať nebo nevolnost. Proto by animace měla respektovat nastavení přístupnosti prefers-reduced-motion, které v prohlížeči vypne nebo zjemní pohyb, když to má uživatel takto nastavené v systému. Animace spouštěná interakcí (třeba kliknutím) by navíc měla jít vypnout a nic by nemělo blikat víc než třikrát za sekundu.
Technicky to není složité přidat, ale při nasazení se na to často zapomíná.
Můj pohled
S Lottie jsem párkrát pracoval osobně a teď s ním navíc pracuje designér v mém týmu na nových projektech. Je to nástroj, který si najde uplatnění spíš v detailech než jako hlavní tahák webu - jemná animace u ikonky nebo loading stavu umí web oživit, aniž by to stálo hodiny práce navíc.
Lottie nepotřebujete na každý web. Ale tam, kde chcete, aby web působil živěji a zároveň nezpomalil načítání, je to jeden z nejlevnějších způsobů, jak toho dosáhnout. Pokud řešíte i celkovou rychlost webu nebo velikost obrázků (třeba přes formát WebP), Lottie do té úvahy zapadá přirozeně - je to další kousek skládačky, ne náhrada za základy.
Pavel Szabo
Programátor webů, eshopů a informačních systémů s více než 23 lety praxe. Pomáhám firmám i jednotlivcům s online podnikáním, automatizacemi a využitím AI v praxi.
