AnimeJS
animejs.comJavaScript animationJavaScript animasyonanimation engineanimasyon motoruCSS animationCSS animasyonlarıSVG animationSVG animasyonweb animationweb animasyonufrontend developmentön yüz geliştirmeanimation libraryanimasyon kütüphanesimotion designhareketli tasarımtimeline animationzaman çizelgesistaggeringkademeli animasyondraggable elementssürüklenebilir elementlermotion pathhareket yoluline drawingçizgi çizimiscroll animationkaydırma animasyonuspring physicsyay fiziğikeyframesanahtar karelereasing functionsyumuşatma fonksiyonlarıshape morphingşekil dönüştürmeJavaScriptJSweb developmentweb geliştirmeUI animationarayüz animasyonuinteractive webetkileşimli weblightweight libraryhafif kütüphanemodular APImodüler APIweb animasyon motoruanimasyon oluşturucuanimation creatoromni tools
Web projeleriniz için tek bir API ile CSS, SVG ve DOM elementlerini canlandıran, hepsi bir arada bir JavaScript animasyon kütüphanesi.
Anime.js, web üzerindeki herhangi bir şeyi canlandırmak için tasarlanmış, hepsi bir arada bir JavaScript animasyon motorudur. Tek bir API kullanarak tarayıcı sınırlamalarını aşmanızı sağlar. 🚀
Güçlü ve sezgisel bir API ile animasyonlarınızı daha hızlı oluşturun. Her özellik için ayrı parametreler, esnek anahtar kare (keyframe) sistemi ve yerleşik yumuşatma (easing) fonksiyonları sunar. 💻
Yerleşik SVG araç seti sayesinde şekilleri kolayca dönüştürün (morphing), hareket yollarını takip edin (motion path) ve çizgiler çizin (line drawing). ✏️
Scroll Observer API'si ile animasyonları sayfa kaydırma hareketine göre senkronize edin ve tetikleyin. Bu özellik, çoklu senkronizasyon modları ve gelişmiş eşik ayarları sunar. 📜
Güçlü Timeline API'si ile animasyon dizilerini yönetin ve geri çağırma (callback) fonksiyonlarını senkronize tutun. Gelişmiş zaman pozisyonları ve oynatma ayarları ile tam kontrol sizde olur. ⏰
Scope API'sini kullanarak animasyonlarınızı medya sorgularına (media queries) kolayca duyarlı hale getirin. Böylece tasarımlarınız farklı ekran boyutlarına otomatik olarak uyum sağlar. 📱
Sadece ihtiyacınız olan parçaları içe aktararak paket boyutunuzu (bundle size) küçük tutun. Hafif ve modüler API yapısı, projenize gereksiz yük bindirmez. 📦
Nasıl Kullanılır?
- Projenize `npm i animejs` komutuyla kütüphaneyi yükleyin.
- Canlandırmak istediğiniz CSS, SVG veya DOM elementini seçin.
- `animate()` fonksiyonunu çağırarak animasyonu başlatın.
- Animasyon özelliklerini (rotate, x, y, scale vb.) bir obje olarak tanımlayın.
- Süre (duration), döngü (loop) ve yumuşatma (ease) gibi parametreleri ayarlayın.
- Birden fazla animasyonu sıralamak için `createTimeline()` ile bir zaman çizelgesi oluşturun.
- Bir yol üzerinde hareket için `createMotionPath` fonksiyonundan yararlanın.
- Kaydırma ile animasyon tetiklemek için `onScroll` fonksiyonunu entegre edin.
- Element gruplarına kademeli efektler uygulamak için `stagger()` fonksiyonunu kullanın.
- Etkileşimli elemanlar için `createDraggable()` ile sürükle-bırak özelliği ekleyin.
- Farklı ekran boyutlarına özel animasyonlar için `createScope()` API'sini kullanın.
Özellikler
- Hepsi Bir Arada Animasyon Motoru
- Sezgisel ve Güçlü JavaScript API'si
- Gelişmiş Bireysel CSS Dönüştürme (Transform) Kontrolü
- SVG Şekil Dönüştürme (Morphing) ve Hareket Yolları
- Kaydırma Hareketine Duyarlı Animasyonlar (Scroll Observer)
- Dahili Kademeli Efekt (Staggering) Fonksiyonu
- Sürüklenebilir ve Yay (Spring) Fiziğine Sahip Elementler
- Kapsamlı Animasyon Zaman Çizelgesi (Timeline) Yönetimi
- Medya Sorguları ile Duyarlı (Responsive) Animasyonlar
- Modüler Yapı ile Optimize Edilmiş Paket Boyutu
- Esnek Anahtar Kare (Keyframe) Sistemi
- Yerleşik Yumuşatma (Easing) Fonksiyonları