GSAP ve Webflow: animace bez zpomalení webu

GSAP ve Webflow: jak to dnes vypadá

Webflow v roce 2024 koupil GSAP (GreenSock Animation Platform). Poté oznámil, že GSAP je zdarma pro všechny, ať už Webflow používají, nebo ne.

Webflow také vydal novou verzi Interactions, která běží na GSAP. Do vizuálního rozhraní přináší funkce, které uživatelé GSAP znají: stagger, scroll animace ve stylu ScrollTriggeru a dělení textu. Podle Webflow je dostupná ve všech tarifech.

Tím se mění otázka. Dřív zněla „potřebuji vlastní kód?“. Dnes zní „stačí vizuální interakce, nebo potřebuji ručně psaný GSAP?“. Licenční podmínky a dostupnost pluginů se mohou měnit, proto si před příslibem klientovi ověřte aktuální stav na gsap.com a v dokumentaci Webflow.

V praxi tedy platí: pokud potřebujete jen plynulé odkrývání obsahu, začněte nativními interakcemi. Vlastní kód přidejte, až když narazíte na jejich hranice. Klient pak dostane web, který se snáz upravuje, a vy méně míst, kde se může něco rozbít.

Nativní interakce, nebo vlastní kód v GSAP

Doporučuji zvolit nejjednodušší nástroj, který práci zvládne.

• Nativní interakce Webflow pro fade, slide, stagger, stavy hover a klik a běžné odkrývání při scrollu. Klient je vidí v Designeru a nevyžadují žádnou údržbu.
• Vlastní GSAP pro sekvence řízené logikou nebo stavem, složité storytellingové efekty navázané na scroll, připnuté sekce s více kroky, práci s canvasem nebo SVG a vše, co musí číst data nebo reagovat na jiné skripty.

Vlastní kód je flexibilnější, ale dražší na údržbu. Pro vše nad rámec nativních interakcí Webflow používám GSAP a náročné stránky označuji včas, protože to ovlivní, jak strukturuji layout.

Animujte jen to, co prohlížeč zvládne levně

Nejdůležitější pravidlo výkonu je zároveň nejjednodušší. Prohlížeče umí animovat transform (posun, měřítko, rotace) a opacity na compositoru, obvykle bez přepočítání layoutu a překreslení. Animace vlastností jako width, height, top, left, margin nebo box-shadow je mnohem dražší. Podrobnosti najdete na web.dev o vlastnostech pro compositor.

• Posouvejte přes x a y, ne top a left. Vlastnosti x a y v GSAP používají transformace.
• Změnu velikosti napodobte měřítkem, pokud to design dovolí.
• Blur, stíny a velké filtry animujte jen výjimečně, zvlášť na velkých prvcích. Jsou náročné, zejména na telefonech.
• will-change používejte střídmě. Když ho dáte všude, vznikne příliš mnoho vrstev a roste spotřeba paměti.
• Nebudujte animace, které přeskládají stránku, například akordeon měnící výšku v dlouhém seznamu. Když to jinak nejde, držte to lokální a krátké.

ScrollTrigger: pořádek, který se vyplatí

Animace navázané na scroll jsou místem, kde se většina pomalých webů ve Webflow dostává do potíží. Dokumentace ScrollTriggeru je dobrá. Tyto návyky dodržuji.

• Méně triggerů. Skupinu animujte jedním triggerem se staggerem, ne jedním triggerem na každou kartu.
• Scrub nechte na lehké prvky. Svázání těžkého prvku s pozicí scrollu stojí práci při každé události scrollu.
• S pinováním opatrně. Připnuté sekce přidávají vložené mezery a mění výšku stránky. Vnořená nebo naskládaná pinování jsou častým zdrojem chyb.
• Refresh ve správný okamžik. Obrázky, fonty a pozdě načtený obsah mění layout a pozice triggerů se pak rozcházejí. Refresh zavolejte, až se layout usadí.
• Uklízejte. Ukončete triggery a tweeny, které už nepotřebujete, zejména pokud je vytváříte při interakci nebo změně velikosti okna.
• Použijte once: true nebo toggle actions u odkrývání, které se má spustit jen poprvé.

Pamatujte také, že preview v Designeru a publikovaný web se mohou chovat odlišně. Testujte vždy na publikovaném nebo staging odkazu.

Omezený pohyb a mobil

Některým návštěvníkům se z pohybu motá hlava nebo je ruší. Nastavení prefers-reduced-motion jim umožňuje to říct a dobrý web to respektuje.

• Nastavení zjišťujte a při zapnutí vynechte nebo zkraťte parallax, velké pohyby a automaticky spuštěné sekvence.
• Obsah nechte viditelný. Omezený pohyb má znamenat méně animací, ne schovaný text.
• Použijte gsap.matchMedia() a definujte jednu sadu animací pro uživatele bez omezení, druhou pro omezený pohyb a třetí pro mobil. GSAP to popisuje v referenci matchMedia a po změně podmínky po sobě automaticky uklidí.

Na mobilu počítejte s menším výkonem a menší trpělivostí. Připnuté sekce a těžký parallax na dotykových zařízeních obvykle zjednoduším nebo odstraním a zkrátím délky animací. Je to i otázka designu, takže ji rád domlouvám s designérem už při předání. Podívejte se na můj checklist předání z Figmy do Webflow.

Lazy inicializace: načítejte a spouštějte animace, až když jsou potřeba

Animace pod hranou obrazovky není nutné připravovat, zatímco se stránka ještě načítá.

• GSAP a pluginy načtěte jednou, z jednoho místa, s atributem defer a jen na stránkách, které je používají.
• Použijte IntersectionObserver a timeliny vytvářejte, až když sekce vstupuje do viewportu, ne všechny najednou při načtení.
• Vyhněte se práci s layoutem při načtení. Nečtěte a nezapisujte vlastnosti layoutu ve smyčce, zatímco se stránka vykresluje.
• První obrazovku držte jednoduchou. Animace hero sekce, která zdrží největší prvek, zhoršuje vnímanou rychlost i metriku LCP.

Jak měřit: Lighthouse, INP a skutečný telefon

Nehádejte. Měřte před změnou i po ní.

1. Spusťte Lighthouse na publikované stránce v mobilním režimu a sledujte Total Blocking Time a LCP.
2. Zkontrolujte INP, metriku, která měří, jak rychle stránka reaguje na kliknutí a klepnutí. Viz web.dev o INP. Dlouhé skripty během animace mohou způsobit, že se interakce zdají zaseknuté.
3. Nahrajte Performance trace v Chrome DevTools při scrollování. Hledejte dlouhé úlohy, přepočty layoutu a zahozené snímky.
4. Otestujte na skutečném androidu střední třídy. Ukáže problémy, které notebook skryje.
5. Porovnejte s vypnutými animacemi, abyste přesně viděli, kolik stojí.

Terénní data v reportu Core Web Vitals v Search Console ukazují, jak web v čase vnímají skuteční návštěvníci. Širší checklist najdete v mém SEO checklistu pro Webflow.

Výsledky si zapisujte. Když po úpravě animací vidíte lepší TBT nebo INP, máte argument pro klienta i pro příští projekt a při další změně se můžete vrátit k číslům, ne k dojmu.

Časté chyby, které animace ve Webflow zpomalují

Tohle jsou problémy, které vídám nejčastěji, když přebírám web s hodně pohybu.

1. Animace vlastností layoutu. Animace width, height a margin vypadají na desktopu dobře a na telefonu sekají. Přepněte na transform a opacity.
2. Příliš mnoho scroll triggerů. Třicet samostatných triggerů na jedné stránce se sčítá. Prvky seskupte a použijte stagger.
3. Animuje se všechno. Když se hýbe každý prvek, nic nevyniká. Vyberte tři čtyři momenty, které mají váhu.
4. Velká neoptimalizovaná média v animovaných sekcích. Obrázek o 4 MB, který se plynule objeví, je pořád obrázek o 4 MB. Nejdřív ho zmenšete a zkomprimujte.
5. Žádná záložní varianta. Když skript selže nebo uživatel chce omezený pohyb, obsah musí zůstat viditelný a čitelný. Text s opacity 0 jako jediným stavem ve stylech bez plánu pro tento případ nenechávejte.
6. Testování jen v Designeru. Preview neodráží skutečné načítání, cache ani pomalejší zařízení.
7. Načítání několika animačních knihoven. Jeden animační systém na web se snáz udrží rychlý a snáz se předává.

Nic z toho není exotické. Krátká kontrola podle tohoto seznamu obvykle najde většinu problémů na pomalé stránce a oprava stojí mnohem méně než předělávání animací.

Můj pohled: pohyb, který podporuje značku

Navrhuji a ve Webflow stavím od roku 2018 a GSAP používám na práci, která přesahuje nativní interakce. Důvěřuji vzorci zdrženlivosti. U Stone Hedge Capital, webu pro investory navrženého Boldhumanem, zadání požadovalo konzervativní, vyzrálý dojem, a proto jsem ho postavil s decentní a účelnou animací. U Big Moe Watches, katalogu s více než 1 100 luxusními hodinkami, měly pohyb a typografie odpovídat prémiovému produktu a katalog se přitom měl dál snadno procházet.

Jde o to, že animace je součást značky, ne dekorace navíc. Klidná značka potřebuje klidný pohyb. Prémiový katalog potřebuje pohyb, který kupujícímu nikdy nestojí mezi ním a produktem. Pokud chcete pohyb v projektu naplánovat, napište ke každé animaci jednu větu a řekněte mi, co se má dít na mobilu. Pošlete mi design a řeknu vám, které části mají být nativní a které potřebují GSAP.

Časté otázky

AutorPeter CekanakDesignér a Webflow vývojář · white-label partner pro agentury

Od roku 2018 navrhuji a stavím weby ve Webflow pro agentury a startupy — Client-First, GSAP, CMS a AI automatizace. Weby, které jsem postavil, pomohly klientovi k exitu za 10 mil. $ a jednomu SaaS ztrojnásobily poptávky dema.

Webflow Certified ExpertRelume ExpertClient-First