30 Awesome SVG-animasjon for din inspirasjon

Designere pleide å lage animasjoner i HTML-elementer ved hjelp av CSS. På grunn av begrensningene i HTML-elementene i å lage mønstre, figurer og andre, svinger de imidlertid naturlig til SVG, noe som gir mer interessante muligheter.

Vi jobber med SVG, og har god nettleservisning for SVG-animasjon, og vi har flere måter å lage ny animasjon på. Du kan bruke både den innebygde SVG-animasjonsfunksjonen eller CSS3-animasjonen (merk at ikke alt kan gjøres av CSS, slik at det fortsatt er behov for JavaScript). En annen måte er å bruke JavaScript-motorer som GSAP eller Snap. JS er god praksis for å skape animasjon.

Her har jeg samlet noen fantastiske animerte SVG. Noen bruker SVG-animasjon, andre bruker CSS-transformasjon for grunnleggende animasjon, og resten bruker hjelp av JavaScript.

Border Animasjon av Sean McCaffery

Laget bare med CSS, en grense dannes jevnt rundt teksten når du svinger over "HOVER" instruksjonen.

Elastisk SVG Sidebar av Nikolay Talanov

Sidebjelken blir elastisk når du prøver å trekke den bort fra siden. Et fint konsept som brukes på en Material Design-inspirert applikasjon sidebar.

Trekk ned for å oppdatere av Nikolay Talanov

De fleste sider lar deg "trekke ned" på siden for å oppdatere. Med denne animasjonen, når du "slipper" siden, endres Send-ikonet til et flyikon og blir utgitt i luften.

Animert Gradient on Text av Patrick Young

Her er en subtil men ikke lett å gå glipp av å flytte tekstgradienten som typografi elskere vil elske.

Hjerte Animasjon av Nikolay Talanov

Denne animasjonen viser hvordan et hjerteikon er laget av to sirkler og en firkant. Transformasjonen er gjort med CSS animasjon.

La oss reise med jjperezaguinaga

En animasjon som illustrerer byer og populære turistmål i verden. Bevegelsene og transformasjonene er opprettet ved hjelp av CSS animasjon.

Meny veksle animasjon av Tamino Martinius

En morphing animasjon av hamburgerikonet blir til et kryssikon. Se hvor glatt overgangen er mellom de to objektene.

Animert Infographic av Sdras

En fantastisk animasjon av Sarah Drasner, drevet av GSAP tidslinje. Det er et infographic som kommer til liv, laget med animasjon. Bruk glidebryteren til å få tilgang til rammene fra et hvilket som helst punkt.

Rain-Bros liker ikke JS av cihadturhan

En unik og morsom loop animasjon som skildrer karakterenes tur. Bevegelsen av objektene i denne demoen er en kombinasjon av SVG og CSS3 animasjon. Bena bruker SVG-animasjon mens andre deler bruker CSS3-animasjon.

Klokke av Mohamad Mohebifar

Se den glatte bevegelsen til den brukte i denne klokken som viser gjeldende tid. Animasjonen er fullstendig laget ved hjelp av SVG animasjonsfunksjonalitet.

Rainbow Rocket Man av Chris Gannon

En astronaut skyter inn i verdensrommet med regnbueffektdrevet jetpakke (?). Hyggelig animasjon laget ved hjelp av GSAP Tweenmax-plugin.

Animert Ikon av Luigi De Rosa

Men over disse animerte SVG-ikonene for å sjekke ut hva de kan gjøre. Skaperen gjorde dette ved hjelp av GSAP.

Flat arbeidsområde av Hoàng Nhật

Animasjonen illustrerer et arbeidsområde i flatt stildesign. Skaperen brukte GSAP for å gjøre denne fantastiske animasjonen til en arbeidsstasjon danner.

Det klikkbare animerte ikonet av Hamish Williams

Dette er en kul animasjon som gjør bruk av snap.svg biblioteket. Klikk for å se at posten er "sendt".

Dykking av Chris Gannon

Har du noen gang hoppet over steiner på overflaten av en innsjø? Her er en enkel SVG-bananimasjon som illustrerer det, men uten steiner, og ingen innsjø.

Bevegelse for nettet av LegoMushroom

Den har animasjon, en fin melodi, superkult inngang for teksten, hva er det ikke å like? Dette er bygget med mo.js, et bevegelses grafisk JavaScript-bibliotek.

Animert skrive skrift av Lee Porter

I tillegg til å bruke SVG til å gjøre banen animasjon skisse en form, kan du bruke den på typografi som hva denne skaperen gjorde. Blur effekten gjør det mer fantastisk.

Gooey-menyen av Lucas Bebber

Ha det gøy med gooey-effekten i dette designet, som er laget med SVG-filter og ved å legge til CSS-animasjon. Resultatet er realistisk og veldig kul, og du kan spille med fire forskjellige versjoner.

Ny kake av Marco Barría

Hvordan lage en lagdelt bursdagskake laget med SVG og CSS animasjon.

Takk Rachel Smith

Bare se denne fantastiske animasjonen av en enkel takknemåle. Den er opprettet ved hjelp av SVG og GSAP TweenMax bibliotek.

CSS vs SVG av Mario Sanchez Maselli

La oss nå se sammenligningen om CSS og SVG animasjon, ser du forskjellen?

Walking Dog av Mark Nelson

En annen måte å animere SVG på er å bruke spritesbilder, som hvordan denne skaperen gjorde.

Timeglasslader av Leela

Et kreativt arbeid laget med ren SVG-animasjon (SMIL); ingen CSS eller JS å animere ting her.

Logo Animasjon av Adem ilter

Her er en fin animert logo intro ved hjelp av inline SVG animasjon. Ingen CSS eller JS ble brukt til å få alt til å fungere.

Stats animasjon av Jonas Badalic

En vakker statistikkdiagram med SVG animasjon drevet av Snap.SVG bibliotek.

Ouroboros av Noel Delgado

En fantastisk SVG animasjonsbane. Først tok skaperen en stiute på SVG, før du brukte tween.js for å legge til animasjon.

Creative Gooey Effects av Lucas Bebber

Her er syv kreative bruksområder av SVG filter for å gjøre en gooey-lignende effekt. Musikken visualiserer er min favoritt, animasjonen ser veldig fin ut.

Kast ku av Sarah Drasner

Denne er en SVG animasjon drevet av TweenMax, men laget bare for moro skyld. Hold og dra kua rundt planeten. Det vil spinne i "bane".

Animert Logo av Ali

Animasjon kan være et fint lite tillegg for en boblende øllogo. De fine, små flytende boblene er bygget rent med SVG-innfødt animasjonssyntax.