Mérei Tamás webdesigner
Helló!Mérei Tamás vagyok, webdesigner

Weboldalak és felhasználói felületek tervezésével és kódolásával foglalkozom. Dolgozom magánszemélyeknek, vállalkozásoknak, fejlesztő cégeknek és reklámügynökségeknek.

SVG animáció GSAP használatával

A vektorgrafikus SVG animáció elemenként is megoldható. Ehhez az egyes vektorgrafikus alalkazatokat kell ID-val ellátnunk. Innentől ezek gyakorlatilag ugyanúgy működnek, mint bármelyik HTML elem és tudunk rájuk hivatkozni CSS-ből vagy javascript-ből. Mivel CSS-sel bármilyen transzformációt el tudunk végezni, az animáció is gyerekjáték.

GSAP SVG animáció

Az animációt ebben a feladatban a GSAP segítségével valósítjuk meg. A GSAP egy javascript library amely sima CSS animációkat generál, aminek bonyolultabb animációknál vesszük igazán hasznát. Ilyenkor csak az alap paramétereket kell megadnunk, az animáció kezdő és végső állapotát, a többit a GSAP kiszámolja helyettünk.

Az animációt timeline szerűen tudjuk felépíteni, ami jelentősen egyszerűbb, mint a natív CSS szintaxisa. Az idővonalas megközelítés előnye, hogy utólag is könnyedén tudjuk módosítani az animációk hosszát, sorrendjét és eltolását.

A hátránya, hogy be kell húznunk egy javascript library-t a használathoz. Ha bonyolult, nagy mennyiségű animációt készítünk, akkor ez a hátrány eltörpül az előnyök mellett amiket cserébe kapunk.

forráskód

Videó

GSAP SVG animáció videó