{"id":18473,"date":"2025-04-18T06:45:15","date_gmt":"2025-04-18T03:45:15","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/gsap-ile-karmasik-svg-path-animasyonlari-carpici-ui-etkileri\/"},"modified":"2025-04-18T06:45:15","modified_gmt":"2025-04-18T03:45:15","slug":"gsap-ile-karmasik-svg-path-animasyonlari-carpici-ui-etkileri","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/gsap-ile-karmasik-svg-path-animasyonlari-carpici-ui-etkileri\/","title":{"rendered":"GSAP ile Karma\u015f\u0131k SVG Path Animasyonlar\u0131: \u00c7arp\u0131c\u0131 UI Etkileri"},"content":{"rendered":"<p><body><\/p>\n<p>GSAP ile Karma\u015f\u0131k SVG Path Animasyonlar\u0131: \u00c7arp\u0131c\u0131 UI Etkileri<\/p>\n<p>Merhaba! Ben Fatih Soysal ve bug\u00fcn size GreenSock Animation Platform (GSAP) kullanarak karma\u015f\u0131k SVG path&#8217;lerini nas\u0131l animasyonland\u0131raca\u011f\u0131n\u0131z\u0131 g\u00f6sterece\u011fim.  GSAP, performansl\u0131 ve kullan\u0131m\u0131 kolay bir JavaScript animasyon k\u00fct\u00fcphanesi olup,  web tasar\u0131m\u0131n\u0131zda \u00e7arp\u0131c\u0131 UI efektleri yaratman\u0131za olanak tan\u0131r.  Bu makalede,  basitten karma\u015f\u0131\u011fa do\u011fru ilerleyerek ad\u0131m ad\u0131m SVG path animasyonlar\u0131n\u0131 ele alaca\u011f\u0131z.  \u00d6rnekler ve a\u00e7\u0131klamalarla dolu bu rehber,  sizlerin de etkileyici animasyonlar olu\u015fturmas\u0131n\u0131 sa\u011flayacakt\u0131r.<\/p>\n<h2>SVG Path&#8217;ler ve GSAP<\/h2>\n<p>\u00d6ncelikle, SVG path&#8217;lerinin ne oldu\u011funu anlamam\u0131z gerekiyor. SVG (Scalable Vector Graphics),  vekt\u00f6r grafikleri olu\u015fturmak i\u00e7in kullan\u0131lan bir XML tabanl\u0131 dildir. Path \u00f6\u011fesi ise,  karma\u015f\u0131k \u015fekiller \u00e7izmek i\u00e7in kullan\u0131lan bir SVG \u00f6\u011fesidir.  GSAP, bu path&#8217;leri manip\u00fcle ederek \u00e7e\u015fitli animasyonlar olu\u015fturmam\u0131z\u0131 sa\u011flar.  \u00d6rne\u011fin, bir \u00e7izgiyi \u00e7izebilir, bir \u015feklin dolgusunu de\u011fi\u015ftirebilir veya bir path boyunca bir nesneyi hareket ettirebiliriz.  Bu i\u015flemler,  kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirerek,  web sitenize dinamiklik katmaktad\u0131r.<\/p>\n<h2>Basit Bir \u00d6rnek: \u00c7izgi \u00c7izme<\/h2>\n<p>En basit \u00f6rneklerden biri, bir \u00e7izgiyi animasyonlu olarak \u00e7izmektir.  A\u015fa\u011f\u0131daki kod blo\u011fu, GSAP kullanarak bir \u00e7izgiyi zaman i\u00e7inde \u00e7izen basit bir \u00f6rne\u011fi g\u00f6stermektedir:<\/p>\n<pre><code class=\"language-javascript\">\n  let tl = gsap.timeline();\n  tl.to(\"#myPath\", { drawSVG: \"0 1\", duration: 2 }); \n<\/code><\/pre>\n<p>Bu kodda,  drawSVG \u00f6zelli\u011fi,  path&#8217;in hangi k\u0131sm\u0131n\u0131n \u00e7izilece\u011fini kontrol eder. &#8220;0 1&#8221;,  path&#8217;in tamam\u0131n\u0131 (0&#8217;dan 1&#8217;e) 2 saniyede \u00e7izece\u011fini belirtir.  #myPath,  animasyonland\u0131r\u0131lacak path&#8217;in ID&#8217;sini temsil eder.  Burada,  gsap k\u00fct\u00fcphanesinin dahil edildi\u011fini varsay\u0131yoruz.  Bu basit \u00f6rnek,  daha karma\u015f\u0131k animasyonlar i\u00e7in sa\u011flam bir temel olu\u015fturmaktad\u0131r.<\/p>\n<h2>Karma\u015f\u0131k Path&#8217;ler ve Animasyon Tekni\u011fi<\/h2>\n<p>Daha karma\u015f\u0131k path&#8217;ler ile \u00e7al\u0131\u015f\u0131rken,  farkl\u0131 animasyon teknikleri kullanman\u0131z gerekebilir. \u00d6rne\u011fin,  bir path boyunca hareket eden bir nesneyi animasyonland\u0131rabilirsiniz. Bunun i\u00e7in,  motionPathPlugin eklentisini kullanman\u0131z gerekebilir.  Bu eklenti,  bir nesnenin bir path boyunca hareket etmesini kolayla\u015ft\u0131r\u0131r.  Ek olarak,  path&#8217;in farkl\u0131 b\u00f6l\u00fcmlerini farkl\u0131 animasyon s\u00fcreleriyle animasyonland\u0131rabilirsiniz.  Bu sayede daha etkileyici ve ak\u0131c\u0131 animasyonlar yaratman\u0131z m\u00fcmk\u00fcn olacakt\u0131r.<\/p>\n<h2>GSAP ile \u0130leri Seviye Animasyonlar<\/h2>\n<p>GSAP&#8217;nin sundu\u011fu g\u00fc\u00e7l\u00fc \u00f6zelliklerle,  \u00e7ok daha karma\u015f\u0131k ve etkileyici animasyonlar olu\u015fturabilirsiniz.  \u00d6rne\u011fin,  path&#8217;in \u015feklini zaman i\u00e7inde de\u011fi\u015ftirebilir,  renk ge\u00e7i\u015fleri ekleyebilir veya animasyonu kullan\u0131c\u0131 etkile\u015fimleriyle senkronize edebilirsiniz.  Bu  teknikler,  web sitenizin interaktifli\u011fini ve g\u00f6rsel \u00e7ekicili\u011fini b\u00fcy\u00fck \u00f6l\u00e7\u00fcde art\u0131racakt\u0131r.  <a href=\"https:\/\/greensock.com\/docs\/v3\/Plugins\/MotionPathPlugin\">MotionPathPlugin<\/a> bu konuda size yard\u0131mc\u0131 olabilir. Daha fazla bilgi edinmek i\u00e7in <a href=\"https:\/\/fatihsoysal.com\">fatihsoysal.com<\/a> sitesini ziyaret edebilirsiniz.<\/p>\n<h2>Sonu\u00e7<\/h2>\n<p>GSAP,  karma\u015f\u0131k SVG path&#8217;lerini animasyonland\u0131rmak i\u00e7in g\u00fc\u00e7l\u00fc ve kullan\u0131\u015fl\u0131 bir ara\u00e7t\u0131r.  Bu makalede ele ald\u0131\u011f\u0131m\u0131z teknikler ve \u00f6rnekler,  size etkileyici UI efektleri yaratman\u0131z i\u00e7in gerekli bilgiyi sa\u011flayacakt\u0131r.  Unutmay\u0131n ki,  pratik yapmak  bu beceride ustala\u015fman\u0131n en iyi yoludur.  Deney yaparak ve farkl\u0131 teknikleri ke\u015ffederek,  kendi benzersiz animasyonlar\u0131n\u0131z\u0131 yaratabilirsiniz.<\/p>\n<p>Umar\u0131m bu makale faydal\u0131 olmu\u015ftur. Sorular\u0131n\u0131z ve yorumlar\u0131n\u0131z i\u00e7in  her zaman bekliyorum!<\/p>\n<p>#Etiketler: GSAP, SVG animasyon, SVG path animasyonu, UI animasyonu, web animasyon, GreenSock, JavaScript animasyon, web tasar\u0131m, interaktif tasar\u0131m, MotionPathPlugin<\/p>\n<p><\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"GSAP ile Karma\u015f\u0131k SVG Path Animasyonlar\u0131: \u00c7arp\u0131c\u0131 UI Etkileri Merhaba! Ben Fatih Soysal ve bug\u00fcn size GreenSock Animation&hellip;","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-18473","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>GSAP ile Karma\u015f\u0131k SVG Path Animasyonlar\u0131: \u00c7arp\u0131c\u0131 UI Etkileri<\/title>\n<meta name=\"description\" content=\"Merhaba! Ben Fatih Soysal ve bug\u00fcn size GreenSock Animation Platform (GSAP) kullanarak karma\u015f\u0131k SVG path&#039;lerini nas\u0131l animasyonland\u0131raca\u011f\u0131n\u0131z\u0131 g\u00f6sterece\u011fim. GSAP, performansl\u0131 ve kullan\u0131m\u0131 kolay bir JavaScript animasyon k\u00fct\u00fcphanesi olup, web tasar\u0131m\u0131n\u0131zda \u00e7arp\u0131c\u0131 UI efektleri yaratman\u0131za olanak tan\u0131r. Bu makalede, basitten karma\u015f\u0131\u011fa do\u011fru ilerleyerek ad\u0131m ad\u0131m SVG path animasyonlar\u0131n\u0131 ele alaca\u011f\u0131z. \u00d6rnekler ve a\u00e7\u0131klamalarla dolu bu rehber, sizlerin de etkileyici animasyonlar olu\u015fturmas\u0131n\u0131 sa\u011flayacakt\u0131r.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/gsap-ile-karmasik-svg-path-animasyonlari-carpici-ui-etkileri\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"GSAP ile Karma\u015f\u0131k SVG Path Animasyonlar\u0131: \u00c7arp\u0131c\u0131 UI Etkileri\" \/>\n<meta property=\"og:description\" content=\"Merhaba! Ben Fatih Soysal ve bug\u00fcn size GreenSock Animation Platform (GSAP) kullanarak karma\u015f\u0131k SVG path&#039;lerini nas\u0131l animasyonland\u0131raca\u011f\u0131n\u0131z\u0131 g\u00f6sterece\u011fim. GSAP, performansl\u0131 ve kullan\u0131m\u0131 kolay bir JavaScript animasyon k\u00fct\u00fcphanesi olup, web tasar\u0131m\u0131n\u0131zda \u00e7arp\u0131c\u0131 UI efektleri yaratman\u0131za olanak tan\u0131r. Bu makalede, basitten karma\u015f\u0131\u011fa do\u011fru ilerleyerek ad\u0131m ad\u0131m SVG path animasyonlar\u0131n\u0131 ele alaca\u011f\u0131z. \u00d6rnekler ve a\u00e7\u0131klamalarla dolu bu rehber, sizlerin de etkileyici animasyonlar olu\u015fturmas\u0131n\u0131 sa\u011flayacakt\u0131r.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/gsap-ile-karmasik-svg-path-animasyonlari-carpici-ui-etkileri\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-04-18T03:45:15+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/gsap-ile-karmasik-svg-path-animasyonlari-carpici-ui-etkileri\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/gsap-ile-karmasik-svg-path-animasyonlari-carpici-ui-etkileri\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"GSAP ile Karma\u015f\u0131k SVG Path Animasyonlar\u0131: \u00c7arp\u0131c\u0131 UI Etkileri\",\"datePublished\":\"2025-04-18T03:45:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/gsap-ile-karmasik-svg-path-animasyonlari-carpici-ui-etkileri\/\"},\"wordCount\":577,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/gsap-ile-karmasik-svg-path-animasyonlari-carpici-ui-etkileri\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/gsap-ile-karmasik-svg-path-animasyonlari-carpici-ui-etkileri\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/gsap-ile-karmasik-svg-path-animasyonlari-carpici-ui-etkileri\/\",\"name\":\"GSAP ile Karma\u015f\u0131k SVG Path Animasyonlar\u0131: \u00c7arp\u0131c\u0131 UI Etkileri\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-04-18T03:45:15+00:00\",\"description\":\"Merhaba! Ben Fatih Soysal ve bug\u00fcn size GreenSock Animation Platform (GSAP) kullanarak karma\u015f\u0131k SVG path'lerini nas\u0131l animasyonland\u0131raca\u011f\u0131n\u0131z\u0131 g\u00f6sterece\u011fim. GSAP, performansl\u0131 ve kullan\u0131m\u0131 kolay bir JavaScript animasyon k\u00fct\u00fcphanesi olup, web tasar\u0131m\u0131n\u0131zda \u00e7arp\u0131c\u0131 UI efektleri yaratman\u0131za olanak tan\u0131r. Bu makalede, basitten karma\u015f\u0131\u011fa do\u011fru ilerleyerek ad\u0131m ad\u0131m SVG path animasyonlar\u0131n\u0131 ele alaca\u011f\u0131z. \u00d6rnekler ve a\u00e7\u0131klamalarla dolu bu rehber, sizlerin de etkileyici animasyonlar olu\u015fturmas\u0131n\u0131 sa\u011flayacakt\u0131r.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/gsap-ile-karmasik-svg-path-animasyonlari-carpici-ui-etkileri\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/gsap-ile-karmasik-svg-path-animasyonlari-carpici-ui-etkileri\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/gsap-ile-karmasik-svg-path-animasyonlari-carpici-ui-etkileri\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"GSAP ile Karma\u015f\u0131k SVG Path Animasyonlar\u0131: \u00c7arp\u0131c\u0131 UI Etkileri\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"GSAP ile Karma\u015f\u0131k SVG Path Animasyonlar\u0131: \u00c7arp\u0131c\u0131 UI Etkileri","description":"Merhaba! Ben Fatih Soysal ve bug\u00fcn size GreenSock Animation Platform (GSAP) kullanarak karma\u015f\u0131k SVG path'lerini nas\u0131l animasyonland\u0131raca\u011f\u0131n\u0131z\u0131 g\u00f6sterece\u011fim. GSAP, performansl\u0131 ve kullan\u0131m\u0131 kolay bir JavaScript animasyon k\u00fct\u00fcphanesi olup, web tasar\u0131m\u0131n\u0131zda \u00e7arp\u0131c\u0131 UI efektleri yaratman\u0131za olanak tan\u0131r. Bu makalede, basitten karma\u015f\u0131\u011fa do\u011fru ilerleyerek ad\u0131m ad\u0131m SVG path animasyonlar\u0131n\u0131 ele alaca\u011f\u0131z. \u00d6rnekler ve a\u00e7\u0131klamalarla dolu bu rehber, sizlerin de etkileyici animasyonlar olu\u015fturmas\u0131n\u0131 sa\u011flayacakt\u0131r.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/gsap-ile-karmasik-svg-path-animasyonlari-carpici-ui-etkileri\/","og_locale":"tr_TR","og_type":"article","og_title":"GSAP ile Karma\u015f\u0131k SVG Path Animasyonlar\u0131: \u00c7arp\u0131c\u0131 UI Etkileri","og_description":"Merhaba! Ben Fatih Soysal ve bug\u00fcn size GreenSock Animation Platform (GSAP) kullanarak karma\u015f\u0131k SVG path'lerini nas\u0131l animasyonland\u0131raca\u011f\u0131n\u0131z\u0131 g\u00f6sterece\u011fim. GSAP, performansl\u0131 ve kullan\u0131m\u0131 kolay bir JavaScript animasyon k\u00fct\u00fcphanesi olup, web tasar\u0131m\u0131n\u0131zda \u00e7arp\u0131c\u0131 UI efektleri yaratman\u0131za olanak tan\u0131r. Bu makalede, basitten karma\u015f\u0131\u011fa do\u011fru ilerleyerek ad\u0131m ad\u0131m SVG path animasyonlar\u0131n\u0131 ele alaca\u011f\u0131z. \u00d6rnekler ve a\u00e7\u0131klamalarla dolu bu rehber, sizlerin de etkileyici animasyonlar olu\u015fturmas\u0131n\u0131 sa\u011flayacakt\u0131r.","og_url":"https:\/\/fatihsoysal.com\/blog\/gsap-ile-karmasik-svg-path-animasyonlari-carpici-ui-etkileri\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-04-18T03:45:15+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"3 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/gsap-ile-karmasik-svg-path-animasyonlari-carpici-ui-etkileri\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/gsap-ile-karmasik-svg-path-animasyonlari-carpici-ui-etkileri\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"GSAP ile Karma\u015f\u0131k SVG Path Animasyonlar\u0131: \u00c7arp\u0131c\u0131 UI Etkileri","datePublished":"2025-04-18T03:45:15+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/gsap-ile-karmasik-svg-path-animasyonlari-carpici-ui-etkileri\/"},"wordCount":577,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/gsap-ile-karmasik-svg-path-animasyonlari-carpici-ui-etkileri\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/gsap-ile-karmasik-svg-path-animasyonlari-carpici-ui-etkileri\/","url":"https:\/\/fatihsoysal.com\/blog\/gsap-ile-karmasik-svg-path-animasyonlari-carpici-ui-etkileri\/","name":"GSAP ile Karma\u015f\u0131k SVG Path Animasyonlar\u0131: \u00c7arp\u0131c\u0131 UI Etkileri","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-04-18T03:45:15+00:00","description":"Merhaba! Ben Fatih Soysal ve bug\u00fcn size GreenSock Animation Platform (GSAP) kullanarak karma\u015f\u0131k SVG path'lerini nas\u0131l animasyonland\u0131raca\u011f\u0131n\u0131z\u0131 g\u00f6sterece\u011fim. GSAP, performansl\u0131 ve kullan\u0131m\u0131 kolay bir JavaScript animasyon k\u00fct\u00fcphanesi olup, web tasar\u0131m\u0131n\u0131zda \u00e7arp\u0131c\u0131 UI efektleri yaratman\u0131za olanak tan\u0131r. Bu makalede, basitten karma\u015f\u0131\u011fa do\u011fru ilerleyerek ad\u0131m ad\u0131m SVG path animasyonlar\u0131n\u0131 ele alaca\u011f\u0131z. \u00d6rnekler ve a\u00e7\u0131klamalarla dolu bu rehber, sizlerin de etkileyici animasyonlar olu\u015fturmas\u0131n\u0131 sa\u011flayacakt\u0131r.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/gsap-ile-karmasik-svg-path-animasyonlari-carpici-ui-etkileri\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/gsap-ile-karmasik-svg-path-animasyonlari-carpici-ui-etkileri\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/gsap-ile-karmasik-svg-path-animasyonlari-carpici-ui-etkileri\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"GSAP ile Karma\u015f\u0131k SVG Path Animasyonlar\u0131: \u00c7arp\u0131c\u0131 UI Etkileri"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/18473","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=18473"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/18473\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=18473"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=18473"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=18473"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}