GSAP animasyon nasıl yapılır?
GSAP (GreenSock Animation Platform) ile animasyon yapmak için aşağıdaki adımları izlemek gerekmektedir: 1. GSAP Kütüphanesini Dahil Etmek: GSAP kütüphanesini projenize dahil etmek için CDN kullanabilir veya npm ile yükleyebilirsiniz. - CDN kullanımı: `<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>`. - npm kurulumu: `npm install gsap`. 2. HTML Yapısı Oluşturmak: Animasyon yapmak istediğiniz HTML elemanlarını tanımlayın. 3. GSAP Animasyonlarını Yazmak: JavaScript kullanarak GSAP ile animasyonlar oluşturun. Örneğin, bir kutuyu x ekseninde 300 piksel hareket ettirmek için: `gsap.to(".box", { x: 300, duration: 2 });`. 4. Easing Fonksiyonlarını Kullanmak: Animasyonun zamanlamasını kontrol etmek için easing fonksiyonlarını kullanabilirsiniz. Örneğin, `bounce.out` easing fonksiyonu ile: `gsap.to(".box", { x: 300, duration: 2, ease: "bounce.out" });`. 5. Birden Fazla Elemanı Animatmak: Birden fazla elemanı aynı anda animatmak için sınıf veya element seçicisini kullanabilirsiniz. `gsap.to([".box", ".circle"], { rotation: 180, duration: 2 });`. Ek Özellikler: GSAP, timeline, scroll tabanlı animasyonlar ve çeşitli eklentiler gibi daha gelişmiş özellikler de sunar.
GSAP animasyon nasıl yapılır?