30 Úžasná animácia SVG pre vašu inšpiráciu

Návrhári používajú na vytváranie animácií v prvkoch HTML pomocou CSS. Avšak kvôli obmedzeniam prvkov HTML pri vytváraní vzorov, tvarov a iných sa prirodzene obrátia na SVG, čo ponúka zaujímavé možnosti.

Práca so SVG si vychutnávame dobrú podporu prehliadača pre animáciu SVG a máme viac spôsobov, ako vytvoriť novú animáciu. Môžete použiť aj zabudovanú animačnú funkciu SVG alebo animáciu CSS3 (všimnite si, že nie všetko môže byť vykonané pomocou CSS, takže je ešte potrebné JavaScript). Ďalšou možnosťou je použitie nástrojov typu JavaScript, ako napríklad GSAP alebo Snap. JS je dobrá prax pre tvorbu animácie.

Tu som zostavil nejaký úžasný animovaný SVG. Niektoré používajú animáciu SVG, iné používajú CSS transformáciu pre základnú animáciu a ostatné používajú JavaScript.

Hraničná animácia od Seana McCafferyho

Vyrobené len pomocou CSS, hranicu sa okolo textov plynule vytvára, keď prejdete nad “VZNÁŠAŤ SA” inštrukcia.

Pružný SVG bočný panel Nikolay Talanov

Postranný panel sa stáva pružný, keď ho pokúšate vytiahnuť zo strany. Pekný koncept aplikovaný na bočnom paneli aplikácie inšpirovanom materiálovým dizajnom.

Nikolay Talanov vyčerpá aktualizáciu

Väčšina stránok vám umožňuje “stlačte” na stránke, ktorú chcete obnoviť. S touto animáciou, keď vy “uvoľnenie” stránku, ikona Odoslať sa zmení na ikonu Rovina a uvoľní sa do ovzdušia.

Animovaný gradient na texte od Patricka Younga

Tu je jemný, ale nie ľahko vynechať pohyblivý textový gradient, ktorý milovníci typografie milujú.

Srdce Animácia Nikolay Talanov

Táto animácia vám ukáže, ako sa vytvorí ikona srdca z dvoch kruhov a štvorca. Transformácia sa vykonáva pomocou animácie CSS.

Poďme cestovať jjperezaguinaga

Animácia, ktorá ilustruje mestá a obľúbené turistické destinácie na svete. Tóny a transformácie sa vytvárajú pomocou animácie CSS.

Menu prepínanie animácie Tamina Martinius

Morfingová animácia ikony hamburgeru sa stáva krížovou ikonou. Pozrite sa, aký je hladký prechod medzi dvoma objektmi.

Animované Infographic od spoločnosti Sdras

Úžasná animácia od Sarah Drasner, poháňaná časovou osou GSAP. Ide o infografiu, oživujúcu sa animáciou. Pomocou posúvača môžete získať prístup k snímkam z ľubovoľného bodu.

Rain-Bros nemá rád JS cihadturhan

Unikátna a zábavná animácia slučky zobrazujúca prechádzanie postáv. Pohyb objektov v tejto ukážke je kombináciou animácie SVG a CSS3. Nohy používajú animáciu SVG, zatiaľ čo ostatné časti používajú animáciu CSS3.

Hodiny od Mohamada Mohebifara

Sledujte plynulý pohyb druhej ruky v týchto hodinách s aktuálnym časom. Animácia je úplne vytvorená pomocou funkcie animácie SVG.

Rainbow Rocket Man Chris Gannon

Astronaut streľba do vesmíru s jeho dúhový pohon jet pack (?). Pekná animácia vytvorená pomocou doplnku GSAP Tweenmax.

Animovaná ikona od Luigi De Rosa

Avšak cez tieto animované ikony SVG sa môžete pozrieť, čo môžu robiť. Tvorca to urobil pomocou GSAP.

Plošný pracovný priestor od Hoàng Nhật

Animácia znázorňuje pracovný priestor v dizajne plochého štýlu. Tvorca použil program GSAP na vytvorenie tejto úžasnej animácie formovania pracovnej stanice.

Klikajúca animovaná ikona od Hamisa Williamsa

Toto je skvelá animácia, ktorá využíva knižnicu snap.svg. Kliknutím zobrazíte poštu “odoslané”.

Potápanie Chrisom Gannonom

Už ste niekedy vynechali kamene na povrchu jazera? Tu je jednoduchá animácia SVG, ktorá ju ilustruje, ale bez kameňov a bez jazera.

Pohyb po webe spoločnosťou LegoMushroom

Má animáciu, peknú melódiu, super chladný vstup pre text, čo sa nepáči? Toto je vytvorené pomocou mo.js, pohybovej grafickej knižnice JavaScript.

Animované písmo od Lee Porter

Okrem použitia SVG, aby sa animácia na ceste skicovala tvarom, môžete ju použiť na typografiu, ako to urobil tento tvorca. Rozmazanie efekt robí to úžasnejšie.

Gooey menu Lucasom Bebberom

Zabávajte sa efektom gooey v tomto dizajne, ktorý je vytvorený pomocou filtra SVG a pridaním animácie CSS. Výsledok je realistický a skutočne v pohode a môžete hrať so štyrmi rôznymi verziami.

Nový tortu Marco Barría

Ako vytvoriť vrstvený narodeninový tortu vytvorený pomocou animácie SVG a CSS.

Ďakujem vám Rachel Smith

Stačí sa pozrieť na túto úžasnú animáciu jednoduchej poďakovania. Vytvára sa pomocou knižnice SVG a GSAP TweenMax.

CSS vs SVG od Mario Sanchez Maselli

Teraz sa pozrime na porovnanie animácií CSS a SVG, vidíte rozdiel?

Walking Dog od Mark Nelson

Ďalším spôsobom, ako animovať SVG, je použitie skriptových obrázkov, ako to urobil tento tvorca.

Hydraulický nakladač Leela

Tvorivá práca vykonaná pomocou čistého animovania SVG (SMIL); žiadne CSS alebo JS, ktoré tu animujú veci.

Logo Animácia podľa Adem ilter

Tu je pekné animované logo úvod pomocou inline SVG animácie. Žiadne CSS ani JS neboli použité na to, aby všetko fungovalo.

Štatistika animácie Jonas Badalic

Krásny štatistický graf s animáciou SVG s podporou knižnice Snap.SVG.

Ouroboros od Noel Delgado

Úžasná animácia SVG. Najprv vytvoril trasu cesty na SVG, pred použitím tween.js na pridanie animácie.

Kreačné hádankové efekty Lucas Bebber

Tu je sedem kreatívnych použití filmu SVG, aby ste dosiahli podobný efekt. Hudobný vizualizátor je môj obľúbený, animácia vyzerá veľmi pekne.

Dajte kravu Sarah Drasner

Toto je animácia SVG poháňaná systémom TweenMax, ale len pre zábavu. Držte a presuňte kravu okolo planéty. Bude točiť v "obežnej dráhe".

Animované logo Ali

Animácia by mohla byť peknou príležitosťou pre plytké logo piva. Pekné malé plávajúce bubliny sú postavené výlučne na pôvodnej animačnej syntaxe SVG.