{"id":41144,"date":"2026-03-03T19:41:26","date_gmt":"2026-03-03T16:41:26","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=41144"},"modified":"2026-03-03T19:41:26","modified_gmt":"2026-03-03T16:41:26","slug":"giris-svg-ve-greensock-gsap-ile-web-animasyonlarinin-gucu","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/giris-svg-ve-greensock-gsap-ile-web-animasyonlarinin-gucu\/","title":{"rendered":"Giri\u015f: SVG ve GreenSock (GSAP) ile Web Animasyonlar\u0131n\u0131n G\u00fcc\u00fc"},"content":{"rendered":"

<\/p>\n

Giri\u015f: SVG ve GreenSock (GSAP) ile Web Animasyonlar\u0131n\u0131n G\u00fcc\u00fc<\/h2>\n
Web siteleri ve uygulamalar, kullan\u0131c\u0131 deneyimini zenginle\u015ftirmek i\u00e7in giderek daha fazla animasyona ihtiya\u00e7 duymaktad\u0131r. Bu animasyonlar\u0131n temel ta\u015flar\u0131ndan biri \u00d6l\u00e7eklenebilir Vekt\u00f6r Grafikleri (SVG) ve onlar\u0131 canland\u0131rmak i\u00e7in kullan\u0131lan g\u00fc\u00e7l\u00fc bir JavaScript k\u00fct\u00fcphanesi olan GreenSock Animation Platform (GSAP)’t\u0131r. SVG’ler, \u00e7\u00f6z\u00fcn\u00fcrl\u00fckten ba\u011f\u0131ms\u0131z olmalar\u0131 ve k\u00fc\u00e7\u00fck dosya boyutlar\u0131 sunmalar\u0131 nedeniyle logolar, ikonlar ve karma\u015f\u0131k \u00e7izimler i\u00e7in idealdir. GreenSock (eski ad\u0131yla TweenMax\/TweenLite) ise, taray\u0131c\u0131lar aras\u0131 uyumluluk, performans ve esneklik a\u00e7\u0131s\u0131ndan sekt\u00f6r standard\u0131 haline gelmi\u015f, animasyonlar\u0131 kolayca olu\u015fturman\u0131z\u0131 sa\u011flayan bir ara\u00e7t\u0131r.<\/p>\n
Bu rehberde, pop\u00fcler Alligator.io web sitesinin logosunu SVG ve GreenSock kullanarak nas\u0131l canland\u0131raca\u011f\u0131m\u0131z\u0131 ad\u0131m ad\u0131m inceleyece\u011fiz. Bu s\u00fcre\u00e7, SVG’nin yap\u0131s\u0131n\u0131 anlamaktan, GreenSock’un temel \u00f6zelliklerini kullanmaya ve etkileyici, performansl\u0131 animasyonlar olu\u015fturmaya kadar uzanacakt\u0131r. Amac\u0131m\u0131z, sadece bir logoyu canland\u0131rmak de\u011fil, ayn\u0131 zamanda bu teknolojilerin g\u00fcc\u00fcn\u00fc ve web projelerinizde nas\u0131l kullan\u0131labilece\u011fini g\u00f6stermektir.<\/p>\n

Alligator.io SVG Logo Yap\u0131s\u0131n\u0131 Anlamak<\/h2>\n
Bir SVG logosunu canland\u0131rmadan \u00f6nce, onun yap\u0131s\u0131n\u0131 iyi anlamak kritik \u00f6neme sahiptir. Alligator.io logosu, genellikle bir timsah kafas\u0131 fig\u00fcr\u00fc ve “Alligator.io” metninden olu\u015fur. Bu iki ana bile\u015fen, SVG i\u00e7inde farkl\u0131 elementler olarak tan\u0131mlan\u0131r ve her birine benzersiz bir kimlik (ID) atan\u0131r, b\u00f6ylece GreenSock ile kolayca hedeflenebilirler.<\/p>\n

Temel SVG Elementleri ve Logomuzdaki Yeri<\/h3>\n

Bir SVG dosyas\u0131, XML tabanl\u0131 bir yap\u0131ya sahiptir ve \u00e7e\u015fitli \u015fekil elementleri i\u00e7erir:<\/p>\n

width<\/code>, height<\/code>, viewBox<\/code> ve xmlns<\/code> gibi \u00f6zellikler i\u00e7erir. viewBox<\/code>, SVG’nin kendi i\u00e7 koordinat sistemini tan\u0131mlar ve responsive davran\u0131\u015f i\u00e7in hayati \u00f6neme sahiptir.<\/li>\n
<\/code>: En g\u00fc\u00e7l\u00fc ve esnek SVG elementidir. Karma\u015f\u0131k \u015fekiller \u00e7izmek i\u00e7in kullan\u0131l\u0131r. Timsah kafas\u0131 gibi fig\u00fcrler genellikle bir veya daha fazla <\/code> elementiyle olu\u015fturulur. d<\/code> (data) niteli\u011fi, \u015feklin \u00e7izim komutlar\u0131n\u0131 i\u00e7erir.<\/li>\n
<\/code>: Metin i\u00e7eri\u011fini tan\u0131mlar. Logodaki “Alligator.io” yaz\u0131s\u0131 bu elementle olu\u015fturulur. x<\/code>, y<\/code>, font-family<\/code>, font-size<\/code>, fill<\/code> gibi \u00f6zelliklerle metnin konumu ve stili belirlenir.<\/li>\n

<\/code>: Bir grup elementidir. \u0130lgili SVG elementlerini (\u00f6rne\u011fin, timsah kafas\u0131n\u0131n t\u00fcm par\u00e7alar\u0131n\u0131) bir araya getirerek onlar\u0131 tek bir birim olarak d\u00f6n\u00fc\u015ft\u00fcrmenizi veya canland\u0131rman\u0131z\u0131 sa\u011flar.<\/li>\n<\/ul>\n\u00d6rnek SVG Yap\u0131s\u0131:<\/strong><\/p>\n
Alligator.io logosu i\u00e7in basitle\u015ftirilmi\u015f bir SVG yap\u0131s\u0131 a\u015fa\u011f\u0131daki gibi olabilir. Bu yap\u0131da, timsah kafas\u0131 i\u00e7in bir <\/code> ve metin i\u00e7in bir <\/code> elementi kullan\u0131lm\u0131\u015ft\u0131r. Her bir elemente animasyon i\u00e7in kolayca hedeflenebilecek bir id<\/code> verilmi\u015ftir.<\/p>\n
Bu yap\u0131y\u0131 anlad\u0131ktan sonra, GreenSock ile bu elementleri nas\u0131l hareketlendirece\u011fimize ge\u00e7ebiliriz.<\/p>\n
GreenSock (GSAP) ile Animasyona Ba\u015flamak<\/h2>\nGreenSock, web’deki en g\u00fc\u00e7l\u00fc animasyon k\u00fct\u00fcphanelerinden biridir. CSS, SVG, Canvas, React, Vue, Angular gibi bir\u00e7ok farkl\u0131 teknolojiyi sorunsuz bir \u015fekilde canland\u0131rabilir.<\/p>\n
GSAP Kurulumu<\/h3>\nGSAP’yi projenize dahil etmenin iki ana yolu vard\u0131r:<\/p>\n
1.  CDN Kullan\u0131m\u0131 (H\u0131zl\u0131 Ba\u015flang\u0131\u00e7 \u0130\u00e7in):<\/strong> HTML dosyan\u0131z\u0131n <\/code> veya kapan\u0131\u015f <\/body><\/code> etiketinden hemen \u00f6nce a\u015fa\u011f\u0131daki script etiketini ekleyebilirsiniz:<\/p>\n