Motion

Motion adaptörü, Motion'ın DOM animasyon dizilerini kullanır. Genel paketi ve Motion'ı yükleyin:

pnpm add glazejs motion

import glaze from "glazejs"
import { createMotionAdapter } from "glazejs/motion"
import { animate, stagger } from "motion"

const animations = glaze({
  adapter: createMotionAdapter({ animate, stagger }),
  breakpoints: { md: "(min-width: 768px)" },
  defaults: { element: "duration-0.6" },
  presets: { rise: "from:opacity-0|y-24" },
})

<div data-animate="preset-rise"></div>
<div data-animate="from:opacity-0 to:opacity-1|x-120"></div>
<div data-animate="@md:from:rotate-180|scale-0.5"></div>

Bu kurulum için GSAP gerekmez. Temel ayrıştırma, varsayılanlar, seçiciler, hazır ayarlar, izleme ve yaşam döngüsü yöntemleri her iki motor için ortaktır.

Motion 14.6'nın DOM bildirimleri, @types/react tarafından sağlanan bir türe başvurur. Bağımlılık bildirimlerini denetleyen katı TypeScript projelerinde bu türleri geliştirme bağımlılığı olarak da yükleyin. React bileşeninin kendisi gerekmez:

pnpm add -D @types/react

TypeScript yapılandırmanız ortam türü paketlerini kısıtladığında "react" değerini compilerOptions.types içine ekleyin.

Desteklenen değerler

• Opaklık, dönüşümler ve renkler dahil, sayısal veya dize değerleri alan Motion DOM özellikleri.
• from, to ve eşleştirilmiş from/to durumları. to değeri verilmediğinde from animasyonu öğenin doğal stilinde sona erer.
• Saniye cinsinden sayısal duration, delay, repeatDelay ve stagger değerleri.
• 0 ile 19 arasındaki öğe repeat değerleri ve Boole yoyo. Daha uzun veya sonsuz tekrar için zaman çizelgesi yinelemesini kullanın.
• Zaman çizelgesi defaults, delay, repeatDelay, repeat ve yoyo; zaman çizelgesi repeat--1 sonsuza dek yinelenir.
• Sayısal zaman çizelgesi konumları, sıralı yerleşim, <, > ve +=0.2, -=0.2, <+=0.2 gibi göreli kaydırmalar.
• Motion adlandırılmış easing, linear/none ve yaygın GSAP easing adları: power0 ile power4 arası, sine, expo, circ ve back; .in, .out veya .inOut sonekleriyle.
• Motion'ın rotate değerine eşlenen rotation gibi GSAP dönüş takma adları.

Örneğin, çocuk öğeleri örtüşmeli biçimde sıralı olarak canlandırın:

<div data-animate="tl defaults:duration-0.6">
  <div data-animate="from:opacity-0|y-24"></div>
  <div data-animate="from:opacity-0|y-24 tl:[-=0.2]"></div>
</div>

Motora özgü sınırlar

Adaptör, yalnızca GSAP motorunda bulunan ayarlar için hata verir; bunlara ScrollTrigger, GSAP eklentileri, autoAlpha, xPercent gibi yüzde dönüşümleri, geri çağırım yardımcıları, iç içe attr/css nesneleri ve x-+=100 gibi göreli özellik değerleri dahildir. Yüzde tabanlı zaman çizelgesi konumları ve nesne biçimindeki kademelendirme de desteklenmez. Bu özellikler gerektiğinde GSAP adaptörünü kullanın.

Desteklenen yardımcılar, iki motor arasında aradeğerlemenin aynı olacağı anlamına gelmez. Motion, animasyon oynatımını ve özellik aradeğerlemesini yönetir.

Temizleme

DOM güncellemelerinden sonra animations.refresh() kullanın veya watch özelliğini etkinleştirin. Kaldırma sırasında animations.destroy() çağrısını yapın. Motion oynatımını iptal eder, medya sorgusu dinleyicileriyle gözlemcileri kaldırır ve özgün satır içi stilleri geri yükler.