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.
Videó
