コンテンツへスキップ

Glazeは、ウェブアニメーションの作成を簡素化するユーティリティベースのアニメーションフレームワークです。強力なアニメーションライブラリGSAPを基盤としており、Glazeなら最小限のコードで複雑なアニメーションを作成できます。Tailwindのユーティリティファースト設計に着想を得ており、同様のアプローチに慣れたユーザーにはなじみやすい使い心地です。

Glazeはレスポンシブデザインに標準で対応し、定義したブレークポイントに応じてアニメーションを異なる画面サイズに適応させられます。タイムラインを全面的にサポートしているため、複数のアニメーションを順番に、または同時に実行できます。

さらに、Glazeではドット記法を使って設定オブジェクト内のネストされたプロパティを指定でき、アニメーションを細かく制御できます。現在はGSAPのみをサポートしていますが、Glazeのライブラリに依存しない構文により、将来的に他のアニメーションライブラリとの互換性も期待できます。

機能

  • GSAPをベースにした強力なアニメーション機能
  • 使い慣れたHTMLファーストの手法を実現するユーティリティベースの設計
  • ブレークポイントに応じたレスポンシブアニメーション
  • 順次または並行して実行するアニメーションに対応したタイムライン
  • アニメーション設定を細かく制御するドット記法
  • 将来の拡張を見据えたライブラリに依存しない構文

関連項目

AutoAnimate

魅力的なアニメーションを手軽に取り入れて、ウェブアプリケーションをより印象的にしましょう。

Motion One

ネイティブのブラウザーAPIを基盤とする最新のウェブアニメーションライブラリです。高いパフォーマンスと小さなファイルサイズを実現します。

anime.js

このアニメーションライブラリを使えば、柔軟性と使いやすさを兼ね備えながら、ウェブアプリケーション向けの魅力的なアニメーションを簡単に作成できます。

Framer Motion

Reactアプリケーションで、少ない手間で印象的なアニメーションを作成できる強力なツールです。

GSAP

ウェブ上で魅力的なアニメーションやインタラクションを手軽に作成でき、標準的なトランジションを超えるユーザー体験を実現するアニメーションツールです。

React Spring

滑らかで高性能なトランジションを実現するアニメーションソリューションです。あらゆるインターフェースに躍動感を与え、ユーザー体験を自然に高めます。

Sal

このライブラリを使うと、要素が表示範囲に入ったときに実行される滑らかなスクロールアニメーションをウェブアプリケーションに追加できます。

Tailwind Motion

モーション効果でUIを強化する、シンプルな新しい構文のアニメーションライブラリ。パフォーマンスとアクセシビリティを重視しています。