30 Awesome SVG-animation för din inspiration

Designers brukade skapa animeringar i HTML-element med hjälp av CSS. På grund av begränsningarna av HTML-element för att skapa mönster, former och andra, vänder de sig naturligtvis till SVG, vilket erbjuder mer intressanta möjligheter.

Arbeta med SVG, vi njuter av bra webbläsarsupprotning för SVG-animering, och vi har fler sätt att skapa ny animering. Du kan använda både den inbyggda SVG-animeringsfunktionen eller CSS3-animationen (observera att inte allt kan göras av CSS, så det behövs fortfarande JavaScript). Ett annat sätt är att använda JavaScript-motorer som GSAP eller Snap. JS är bra för att skapa animering.

Här har jag sammanställt några fantastiska animerade SVG. Vissa använder SVG-animering, andra använder CSS-transform för grundläggande animering, och resten använder hjälp av JavaScript.

Border Animation av Sean McCaffery

Gjord endast med CSS, en kant bildas smidigt runt texten när du svävar över “SVÄVA” instruktion.

Elastisk SVG Sidebar av Nikolay Talanov

Sidospärren blir elastisk när du försöker dra bort den från sidan. Ett fint koncept applicerat på en Material Design-inspirerad applikations sidofält.

Dra ner till Uppdatera av Nikolay Talanov

De flesta sidor tillåter dig att “dra ner” på sidan för att uppdatera. Med denna animering, när du “släpp” Sidan, ikonen Skicka ändras till en Plansymbol och släpps ut i luften.

Animerad Gradient på Text av Patrick Young

Här är en subtil men inte lätt att missa rörlig textgradient som typografiälskare kommer att älska.

Hjärta Animation av Nikolay Talanov

Den här animationen visar hur en hjärtatikett är gjord av två cirklar och en kvadrat. Transformationen görs med CSS-animering.

Låt oss resa av jjperezaguinaga

En animering som illustrerar städer och populära turistmål i världen. Flyttningarna och transformationerna skapas med hjälp av CSS-animering.

Meny växla animering av Tamino Martinius

En morphing animation av hamburgare ikonen förvandlas till en kors ikon. Se hur smidig övergången är mellan de två objekten.

Animerad Infografisk av Sdras

En fantastisk animation av Sarah Drasner, drivs av GSAP tidslinje. Det är en infographic som kommer till liv, skapad med animering. Använd skjutreglaget för att komma åt ramarna från vilken som helst punkt.

Rain-Bros gillar inte JS av cihadturhan

En unik och rolig loop animation som avbildar karaktärernas promenad. Objektets rörelse i denna demo är en kombination av SVG- och CSS3-animering. Benen använder SVG-animering medan andra delar använder CSS3-animering.

Klocka av Mohamad Mohebifar

Se den smidiga rörelsen för den begagnade i den här klockan som visar aktuell tid. Animationen är helt tillverkad med hjälp av SVG-animeringsfunktionen.

Rainbow Rocket Man av Chris Gannon

En astronaut skjuter in i rymden med det regnbågeffektiva jetpaketet (?). Trevlig animering gjord med GSAP Tweenmax plugin.

Animerad Ikon av Luigi De Rosa

Men över dessa animerade SVG-ikoner för att kolla vad de kan göra. Skaparen gjorde detta med hjälp av GSAP.

Platt arbetsyta av Hoàng Nhật

Animationen illustrerar en arbetsyta i plattstil design. Skaparen använde GSAP för att göra denna fantastiska animation av en arbetsstation bildande.

Den klickbara animerade ikonen av Hamish Williams

Detta är en cool animation som använder sig av snap.svg-biblioteket. Klicka för att se posten är “skickat”.

Dykning av Chris Gannon

Har du någonsin stött på stenar på ytan av en sjö? Här är en enkel SVG-bananimering som illustrerar det men utan stenar och ingen sjö.

Rörelse för webben av LegoMushroom

Den har animering, en fin melodi, super cool ingång för texten, vad tycker du inte om? Det här är byggt med mo.js, ett rörelsegrafiskt JavaScript-bibliotek.

Animerad skriv typ av Lee Porter

Förutom att använda SVG för att göra banan animering skissar en form, kan du använda den på typografi som vad den här skaparen gjorde. Den suddiga effekten gör det mer fantastiskt.

Gooey-menyn av Lucas Bebber

Ha det roligt med den snygga effekten i denna design, som är gjord med SVG-filter och genom att lägga till CSS-animering. Resultatet är realistiskt och riktigt coolt, och du kan spela med fyra olika versioner.

Nytt tårta av Marco Barría

Hur man gör en lagad födelsedagstårta gjord med SVG och CSS animering.

Tack av Rachel Smith

Bara se den här fantastiska animationen av en enkel tacknot. Det skapas med hjälp av SVG och GSAP TweenMax bibliotek.

CSS vs SVG av Mario Sanchez Maselli

Låt oss nu titta på jämförelsen om CSS och SVG-animering, ser du skillnaden?

Walking Dog av Mark Nelson

Ett annat sätt att animera SVG är att använda spritesbilder, som hur den här skaparen gjorde.

Timglaslastare av Leela

Ett kreativt arbete gjort med ren SVG-animering (SMIL); ingen CSS eller JS att animera saker här.

Logo Animation av Adem ilter

Här är en trevlig animerad logotyp med inline SVG-animering. Ingen CSS eller JS användes för att få allt att fungera.

Stats animering av Jonas Badalic

En vacker statistikdiagram med SVG-animering som drivs av Snap.SVG-biblioteket.

Ouroboros av Noel Delgado

En fantastisk SVG-animationsväg. Först skapade skaparen en vägväg på SVG innan du använde tween.js för att lägga till animering.

Creative Gooey Effects av Lucas Bebber

Här är sju kreativa användningar av SVG-filter för att göra en snyggliknande effekt. Musikvisaren är min favorit, animationen ser väldigt snäll ut.

Kasta koen av Sarah Drasner

Den här är en SVG-animation som drivs av TweenMax men gjordes bara för skojs skull. Håll och dra koen runt planeten. Det kommer att snurra i "omlopp".

Animerad logotyp av Ali

Animering kan vara ett trevligt litet tillägg för en bubblande öllogo. De fina små flytande bubblorna är byggda rent med SVG inbyggd animationssyntax.