# ウェブ向けのユーティリティベースのアニメーション

GSAP向けのユーティリティファーストなアニメーションを、あなたのHTMLで記述できます。

ターミナル

```
npm install glazejs gsap
```

[はじめる](https://glaze.dev/ja/docs/)

[GitHub](https://github.com/inline0/glaze)

最新リリース [v2.0.1](https://github.com/inline0/glaze/releases/tag/v2.0.1) 2024-06-05 MIT GSAP 3

JSX

```
<h1 data-animate="@lg:[&>span>span]:to:y-0|stagger-0.025">
  {"Utility-based animations for the web"
    .split(" ")
    .map((w, i, arr) => (
      <span className="inline-block overflow-hidden">
        <span className="inline-block translate-y-full">
          {w}
        </span>
        {i < arr.length - 1 ? " " : ""}
      </span>
    ))}
</h1>
```

## 実践例

親要素に属性を1つ指定するだけで、定義したブレークポイントで子要素をアニメーションできます。

### 大画面で子カードをスタガー表示

Glazeは各 `data-animate` 文字列を読み取り、GSAPの呼び出しに変換するため、`from:opacity-0|y-50|duration-1` は `gsap.from(element, { opacity: 0, y: 50, duration: 1 })` になります。

サンプルでは、ブラケットセレクターが3つの子divをスタガー付きでアニメーションし、`@lg` は `lg` メディアクエリが `gsap.matchMedia` 経由で一致する間だけ実行します。Glazeに含まれるブレークポイントは `default` だけなので、`lg` は設定で定義します。

[構文ガイドを読む](https://glaze.dev/ja/docs/syntax/)

HTML

```
<div data-animate="@lg:[&>div]:from:opacity-0|y-50|stagger-0.1|duration-0.5|ease-power2.out">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
</div>
```

## GSAPを活用

各文字列はGSAPタイムライン上のGSAPトゥイーンになり、アニメーションはGSAPが実行するため、ScrollTriggerに追加の構文は必要ありません。

## ユーティリティ構文

簡潔で組み合わせ可能なトークンを使い、HTMLでアニメーションを記述できます。

## ブレークポイントバリアント

トークンの先頭に@sm:、@lg:、または設定でメディアクエリとして定義した任意のブレークポイントを付けます。GlazeがGSAP matchMediaを通じて実行します。

## タイムライン対応

タイムラインユーティリティで動きを順番に並べたり、並行して実行したりできます。

## ドット記法

アニメーション内でドット記法を使い、scale.x-2やscrollTrigger.trigger-[&]などのネストされたGSAPプロパティを対象にできます。

## プリセット

設定でトークン文字列に一度名前を付ければ、同じ要素のほかのトークンと一緒にpreset-nameとして再利用できます。

## 軽量

gzip圧縮時で約3 KBです。GSAPは別途インストールして渡す依存関係です。

## 監視モード

watch: trueを設定すると、Glazeは追加された要素、またはトークンが変更された要素のアニメーションを再実行します。debounceTimeを設定しない場合、500 msのデバウンスが適用されます。

インストールや初回の使い方から、高度なワークフローやAPIの詳細まで、Glazeのガイドをご覧ください。

[ドキュメントを読む](https://glaze.dev/ja/docs/)

[ソースを表示](https://github.com/inline0/glaze)