Temel ayarlar

Animasyonlar

Bu sayfa animasyon yığınını anlatır: kütüphane seçimi, sisteme bağlama, günlük kullanım ve genişletme. Tüm genel ayarlar src/config/animations.ts dosyasındadır.

Hangi kütüphaneyi kullanıyoruz

Motion (npm: motion) kullanıyoruz — Framer Motion’ın güncel halefidir. Pazarlama section’larında React bileşeni değil, DOM API’si (animate, inView) tercih edilir. Böylece .astro dosyaları statik HTML kalır; her blok için hydration gerekmez.

Açılır menü ve modallar src/components/ui/ içinde tw-animate-css kullanır — bu UI mikro animasyonudur; sayfa scroll/hero Motion’dan ayrıdır.

Sisteme nasıl uyguladık

Animasyon davranışı birkaç dosyaya bölündü. Motoru nadiren değiştirirsiniz; çoğunlukla config ve section dosyalarındaki HTML attribute’ları yeterlidir.

src/config/animations.ts — enabled, süreler, scroll mesafesi, reduced motion
src/lib/motion-presets.ts — fade-up, fade-in, expand-x keyframe’leri
src/scripts/motion-init.ts — initMotion(): sayfa açılışında hero + scroll inView
src/layouts/BaseLayout.astro — her sayfada initMotion çağrısı
src/styles/core.css — [data-motion] öğeleri .motion-done olana kadar gizler (FOUC önleme)

Ayarlar: src/config/animations.ts

Önce bu dosyayı açın. enabled: false ile tüm Motion animasyonlarını kapatırsınız (içerik görünür kalır). Diğer alanlar varsayılan süreleri ayarlar; tek öğe data-motion-duration ile süreyi ezebilir.


                export const animations = {
  enabled: true,
  respectReducedMotion: true,
  hero: { duration: 1, distance: 40, initialDelayMs: 300 },
  scroll: {
    duration: 0.7,
    distance: 24,
    once: true,
    margin: "0px 0px -15% 0px",
  },
} as const;

enabled — tüm Motion animasyonlarını aç/kapa
respectReducedMotion — azaltılmış hareket varsa animasyon yok
Süre / hız — bir sonraki bölüme bakın

Animasyon hızı

Hero ve scroll ayrı ayarlanır. Yalnızca src/config/animations.ts ve hero sırası için HeroSection-01.astro düzenlenir.

Hero hızı — animations.ts: hero.duration (saniye), hero.initialDelayMs (başlamadan önce ms)
Hero sırası — HeroSection-01.astro: her öğede data-motion-delay (saniye, örn. 0.3, 0.6, 0.9)
Scroll hızı — animations.ts: scroll.duration, scroll.distance
Tek kart yavaş? O öğeye data-motion-duration="1" ekleyin
Çok hızlı mı? hero.duration artırın (örn. 1.2) veya data-motion-delay değerlerini büyütün

Section’larda nasıl kullanılır

Animasyon istediğiniz HTML öğesine attribute ekleyin. Section’ı React’e çevirmeyin. İki mod vardır:

Sayfa açılışı (hero): data-motion-hero="fade-up|fade-in|expand-x"
Scroll’da: data-motion="fade-up|fade-in|expand-x"
İsteğe bağlı: data-motion-delay="0.2" (saniye, kartları sıraya koymak için)
İsteğe bağlı: data-motion-duration="1" (saniye, config’i ezer)
fade-in — yalnızca opacity; fade-up — fade + yukarı; expand-x — yatay çizgi

Örnek: hero (projede mevcut)

src/components/sections/hero/HeroSection-01.astro dosyasına bakın — rozet, başlık, çizgi, alt başlık ve CTA’larda data-motion-hero ve sıralı data-motion-delay vardır.


                <span data-motion-hero="fade-in" data-motion-delay="0.3">Rozet</span>
<h1 data-motion-hero="fade-up" data-motion-delay="0.6">Başlık</h1>
<div data-motion-hero="expand-x" data-motion-delay="0.9" class="h-px w-20" />

Örnek: scroll ile görünme (projede mevcut)

src/components/sections/services/ServicesSection.astro — her kartta data-motion="fade-up" ve index * 0.1 gecikme ile sıralı giriş vardır.


                {list.map((item, index) => (
  <div
    data-motion="fade-up"
    data-motion-delay={(index * 0.1).toFixed(1)}
    class="rounded-xl border p-6"
  >
    ...
  </div>
))}

Başka nerede kullanılır

Herhangi bir .astro section aynı attribute’ları kullanabilir. Ana sayfada uygun yerler: StatsSection (her istatistik), FaqSection-01 (başlık veya her soru), CtaSection-06 (iç kart), TrustBadgesSection, HowItWorksSection (adımlar).

Hizmet detay, Hakkımızda, İletişim: ana başlık veya içerik bloklarına data-motion ekleyin. LCP kritik sayfalarda hero gecikmelerini kısa tutun.

React adalarında (ör. TestimonialsSectionClient.tsx) yalnızca ada içi etkileşim gerekiyorsa motion/react kullanın — scroll fade için tüm Astro section’ı React’e sarmayın.

Yeni preset? src/lib/motion-presets.ts içine case ekleyin
Rehber sayfaları (/docs) genelde statik kalır — istenmedikçe ağır animasyon eklemeyin

İpuçları ve sorun giderme

İçerik görünmüyor mu? Sert yenileme yapın; enabled: true ve konsol hatalarını kontrol edin
Çok fazla animasyon performansı düşürür — satır satır değil, başlık ve kartları tercih edin
İşletim sisteminde azaltılmış hareket açıkken test edin