gsap-animation

GSAP Animasyon Kütüphanesi

Yazarı:

GSAP (GreenSock Animation Platform), JavaScript tabanlı bir animasyon kütüphanesidir.

“GSAP” Nedir?

GreenSock Animasyon Platformu (GSAP), ödüllü sitelerin %50’den fazlası dahil olmak üzere 11 milyondan fazla sitede kullanılan, sektör tarafından ünlü bir araç paketidir! Herhangi bir çerçevede JavaScript’in dokunabileceği hemen hemen her şeyi canlandırmak için GSAP’yi kullanabilirsiniz. İster UI, SVG, Three.js veya React bileşenlerini canlandırmak isteyin – GSAP size yardımcı olur.

Web geliştiricileri tarafından kullanılarak, HTML, CSS ve SVG öğelerinin animasyonlarını yaratmak için kullanılır. GSAP, diğer animasyon kütüphanelerine göre daha hızlıdır ve mobil cihazlar da dahil olmak üzere çeşitli cihazlarda yüksek performans sağlar. Ayrıca, animasyonların daha doğal ve akıcı görünmesini sağlayan birkaç özellik içerir. GSAP, basit animasyonlardan karmaşık animasyonlara kadar her tür projede kullanılabilir.

GSAP Kurulum

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>

Animasyon Oluştur

Bir ‘box’ sınıfıyla bir HTML öğesini canlandırarak başlayalım.

gsap.to(".box", { x: 200 })

Bunun gibi tek bir animasyona ‘ara’ denir. Bu ara, ‘hey GSAP, öğeyi ‘.box’ sınıfıyla x 200 piksel olacak şekilde canlandırın (transform: translateX(200px) gibi)’ diyor.

Sözdizimine daha yakından bakalım.

Animasyonla ilgili bilgileri içeren bir yöntemimiz, bir hedefimiz ve bir vars nesnemiz var.

Metodlar

gsap.to() – Bu, en yaygın ara türüdür. Bir .to() arası, öğenin mevcut durumunda başlayacak ve ara içinde tanımlanan değerlere ‘ilave’ animasyon yapacaktır.

gsap.from() – Arada tanımlanan değerlerden ‘harekete geçtiği’ ve öğenin mevcut durumunda sona erdiği bir geriye doğru .to() gibi.

gsap.fromTo()  – Hem başlangıç ​​hem de bitiş değerlerini siz tanımlarsınız.

gsap.set() – Özellikleri hemen ayarlar (animasyon yok). Temelde, geri alınabilen sıfır süreli bir .to() arasıdır.

Sırada, GSAP’a neyi canlandırmak istediğimizi söylemeliyiz. Başlık altında GSAP, document.querySelectorAll()‘ı kullanır, dolayısıyla HTML veya SVG hedefleri için ‘.class‘ ve ‘#id‘ gibi seçici metinleri kullanabiliriz. Veya bir değişken veya hatta bir Dizi iletebilirsiniz.

// use a class or ID
gsap.to(".box", { x: 200 });

// a complex CSS selector
gsap.to("section > .box", { x: 200 });

// a variable
let box = document.querySelector(".box");
gsap.to(box, { x: 200 })

// or even an Array of elements
let square = document.querySelector(".square");
let circle = document.querySelector(".circle");
                                      
gsap.to([square, circle], { x: 200 })

Değişkenler (variables)


Vars nesnesi, animasyonla ilgili tüm bilgileri içerir. Bu, canlandırmak istediğiniz isteğe bağlı özellikler veya animasyonun davranışını etkileyen süre, Tamamlandığında veya tekrarlama gibi özel özellikler olabilir.

gsap.to(target, {
  // this is the vars object
  // it contains properties to animate
  x: 200,
  rotation: 360,
  // and special properties
  duration: 2
})
GSAPCSSAçıklama
x: 100transform: translateX(100px)Yatay hareket (px or SVG units)
y: 100transform: translateY(100px)Dikey hareket (px or SVG units)
xPercent: -50transform: translateX(-50%)Yatay hareket (percentage of element’s width)
yPercent: -50transform: translateY(-50%)Dikey hareket (percentage of element’s height)
rotation: 360transform: rotate(360deg)Rotate (degrees)
scale: 2transform: scale(2, 2)Increase or decrease size
transformOrigin: “0% 100%”transform-origin: 0% 100%;Çevirinin merkezi, bu sol alt kısım etrafında dönecektir.

Öğrenmenin en iyi yolu deneyerek öğrenmektir. Aşağıdaki demo, canlı bir kod oyun alanıdır, devam edin ve kutuyu hareket ettirmek için değerleri değiştirin!

x: 200, // use default of px
x: "+=200" // relative values
x: '40vw', // or pass in a string with a different unit for GSAP to parse
x: () => window.innerWidth / 2, // you can even use functional values to do a calculation!
  
rotation: 360 // use default of degrees
rotation: "1.25rad" // use radians

CSS properties

Dönüşümler, renkler, dolgu, kenarlık yarıçapı, GSAP hepsini canlandırabilir! Özellikleri camelCase’e almayı unutmayın – örn. background-color, backgroundColor olur.

Timelines 

Zaman çizelgeleri, kolayca ayarlanabilen, esnek animasyon dizileri oluşturmanın anahtarıdır. Bir zaman çizelgesine aralar eklediğinizde, varsayılan olarak aralar eklendikleri sırayla birbiri ardına oynatılır.

// create a timeline
let tl = gsap.timeline()

// add the tweens to the timeline - Note we're using tl.to not gsap.to
tl.to(".green", { x: 600, duration: 2 });
tl.to(".purple", { x: 600, duration: 1 });
tl.to(".orange", { x: 600, duration: 1 });

daha fazlası için dökümantasyon

Yorum yapın