30 Awesome SVG-animaatio inspiraatiota varten

Suunnittelijat käyttivät luomaan animaatioita HTML-elementteissä CSS: n avulla. HTML-elementtien rajoitusten vuoksi kuvioiden, muotojen ja muiden luomisessa he luonnollisesti kääntyvät SVG: hen, joka tarjoaa mielenkiintoisempia ominaisuuksia.

SVG: n kanssa työskenteleminen nauttii hyvästä selaimen ylläpidosta SVG-animaatioon, ja meillä on enemmän tapoja luoda uutta animaatiota. Voit käyttää sekä sisäänrakennettua SVG-animaatiotoimintoa että CSS3-animaatiota (huomaa, että kaikki ei ole mahdollista CSS: n avulla, joten JavaScript on edelleen tarpeellinen). Toinen tapa on käyttää JavaScript-moottoreita, kuten GSAP tai Snap. JS on hyvä käytäntö animaation luomisessa.

Täällä olen koonnut hämmästyttävän animoituneen SVG: n. Jotkut käyttävät SVG-animaatiota, toiset käyttävät CSS-muunnosta perus-animaatioon, ja loput käyttävät JavaScriptin apua.

Sean McCafferyn raja-animaatio

Valmistettu vain CSS: llä, reunus muodostaa sujuvasti tekstin ympärille, kun siirrät “HOVER” ohje.

Nikolay Talanovin elastinen SVG-sivupalkki

Sivupalkki muuttuu joustavaksi, kun yrität vetää sen pois sivulta. Mukava konsepti on sovellettu Material Design -hankkeisiin perustuvaan sovelluspuolen palkkiin.

Vedä Nikolay Talanovin päivittämään alaspäin

Useimmat sivut sallivat “vetää alas” sivulla päivittää. Tämän animaation avulla, kun olet “julkaisu” sivu, Lähetä-kuvake muuttuu tasokuvakkeeksi ja vapautuu ilmaan.

Animoitu gradientti tekstissä Patrick Young

Tässä on hienovarainen mutta ei helppo jättää liikkumatta liikkuvan tekstin gradientti, jota typografian ystäville rakastaa.

Nikolai Talanovin sydän-animaatio

Tämä animaatio näyttää, kuinka sydämen kuvake on tehty kahdesta ympyrästä ja neliöstä. Muutos tehdään CSS-animaatiosta.

Let's Travel jjperezaguinaga

Animaatio, joka kuvaa kaupunkeja ja suosittuja matkailukohteita maailmassa. Liikkeet ja muunnokset luodaan käyttäen CSS-animaatiota.

Tamino Martiniusin valikkokohtainen animaatio

Morphing-animaatio hamburgerikuvakkeesta, joka muuttuu ristikuvakkeeksi. Katso kuinka sujuva siirtyminen on kahden kohteen välillä.

Sdrasin animaatiotiedot

Varsinainen animaatio Sarah Drasnerilta, jota käytetään GSAP-aikajanalla. Se on elämästä tulevaa infografiaa, joka on tehty animaatiosta. Siirry kehyksiin mihin tahansa kohtaan liukusäätimellä.

Rain-Bros ei pidä cihadturhanin JS: stä

Ainutlaatuinen ja hauska silmukan animaatio, joka kuvaa hahmojen kävelyä. Esineiden liikkuminen tässä demossa on yhdistelmä SVG- ja CSS3-animaatioita. Jalat käyttävät SVG-animaatiota, kun taas muut osat käyttävät CSS3-animaatiota.

Mohamad Mohebifarin kello

Katso tämän käden toisen käden sujuvaa liikettä, joka näyttää nykyisen ajan. Animaatio tehdään kokonaan SVG-animaatiotoiminnolla.

Rainbow Rocket Man esittäjä Chris Gannon

Astronautti, joka ampuu avaruuteen, jossa on sateenkaariin perustuva jet pack (?). Mukava animaatio GSAP Tweenmax -liitännällä.

Luigi De Rosan animaatio-kuvake

Näiden animoitujen SVG-kuvakkeiden avulla voit kuitenkin tarkistaa, mitä he voivat tehdä. Luoja teki tämän GSAP: n avulla.

Hoàng Nhật: n tasainen työtila

Animaatio havainnollistaa työtilaa, jossa on tasainen tyyli. Luoja käytti GSAP: tä tehdäkseen tämän mahtavan animaation työaseman muodostamisesta.

Hamish Williamsin napsautettava animoitu kuvake

Tämä on viileä animaatio, jossa käytetään snap.svg-kirjastoa. Napsauta nähdäksesi sähköpostiviestin “lähetetty”.

Chris Gannonin sukellus

Oletko koskaan ohittanut kiviä järven pinnalle? Tässä on yksinkertainen SVG-polku-animaatio, joka kuvaa sitä mutta ei kiviä eikä järveä.

LegoMushroomin Web-liikettä

Siinä on animaatiota, mukavaa viritystä, tekstin superjäähtyä sisäänkäyntiä, mitä ei pidä? Tämä on rakennettu mo.js, liikkuvan graafisen JavaScript-kirjaston avulla.

Lee Porterin animaatiokirjasin

Sen lisäksi, että SVG: n avulla tehdään polku-animaatiota, joka piirtää muotoa, voit käyttää sitä typografiassa, kuten tämä luoja. Hämärtävä vaikutus tekee siitä mahtavamman.

Luce Bebberin Gooey-valikko

Pidä hauskaa tässä suunnittelussa, joka tehdään SVG-suodattimella ja lisäämällä CSS-animaatiota. Tulos on realistinen ja todella viileä, ja voit pelata neljällä eri versiolla.

Marco Barrian uusi kakku

Kuinka tehdä SVG- ja CSS-animaatiosta tehty kerros syntymäpäivä kakku.

Kiitos Rachel Smith

Katsokaa tätä mahtavaa animaatiota yksinkertaisesta kiitospanoksesta. Se luodaan SVG- ja GSAP TweenMax -kirjastojen avulla.

CSS vs. SVG Mario Sanchez Maselli

Katsotaanpa nyt vertailu CSS: stä ja SVG: n animaatiosta, näetkö ero?

Mark Nelsonin kävelykoira

Toinen tapa SVG: n animoimiseksi on käyttää sprites-kuvia, kuten miten tämä luoja teki.

Leelan kuorma-auton kuormaaja

Luova työ, joka on tehty puhtaalla SVG-animaatiolla (SMIL); ei CSS tai JS animoida asioita täällä.

Logo Animation Adem ilter

Tässä on mukava animoitu logo intro käyttäen inline SVG-animaatiota. Mitään CSS: ää tai JS: ää ei käytetty tekemään kaikkea.

Tilastojen animaatio Jonas Badalicilta

Kaunis tilastokaavio, jossa on SVG-animaatio, jota käyttää Snap.SVG-kirjasto.

Ouroboros: Noel Delgado

Hämmästyttävä SVG-animaatiopolku. Ensinnäkin luoja vei reitin reitillä SVG: llä, ennen kuin käytät tween.js: ää lisäämään animaatiota.

Lucas Bebberin luovat Gooey-vaikutukset

Tässä on SVG-suodattimen seitsemän luovaa käyttötapaa, jotka mahdollistavat gooey-vaikutuksen. Musiikin visualisoija on suosikkini, animaatio näyttää hyvältä.

Heitä lehmä Sarah Drasnerin mukaan

Tämä on SVG-animaatio, jota käyttää TweenMax, mutta joka on tehty vain hauskaa varten. Pidä ja vedä lehmää planeetan ympäri. Se pyörii "kiertoradalla".

Animoitu logo, Ali

Animaatio voi olla mukava pieni lisä kupliva olutlogo. Mukavat pienet kelluvat kuplat on rakennettu puhtaasti SVG: n natiivi-animaatio-syntaksilla.