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

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

ターミナル

npm install glazejs gsap

はじめる

GitHub

最新リリースv2.0.12024-06-05MITGSAP 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は設定で定義します。

構文ガイドを読む

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>

JavaScript

glaze({
  lib: { gsap: { core: gsap } },
  breakpoints: {
    default: "(min-width: 1px)",
    sm: "(min-width: 640px)",
    md: "(min-width: 768px)",
    lg: "(min-width: 1024px)",
  },
});

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のガイドをご覧ください。

ドキュメントを読む

ソースを表示