UI MOTION LAB

JavaScriptで作るUIアニメーションの実装アーカイブ。GSAPを使用し、滑らかなモーション表現を検証しています。

3.タブメニュー

  • モーダルウィンドウ・ドロップダウンメニュー・アコーディオンなどのUIサンプルを掲載
  • 各UIにJavaScriptアニメーション（GSAP等）を実装、動作デモ付き
  • HTML/CSS/JSのサンプルコードをコピー可能
  • GitHubにサンプルコードを公開

初めまして、ひろんと申します。
神社とスタバが好きな30代後半の男性です。
このサイトでは自作のUIコンポーネントや、役立つサンプルコードを公開しています！

タブボタンをクリックすると、対応するコンテンツに切り替わります。

【動作】
  • タブボタンをクリックで対応するコンテンツを表示
  • アクティブなタブとコンテンツには`is-active`クラスが付与されます
【アニメーション】
  • フェードインしながら上から下にスライドして表示されます

4.アコーディオン

UI MOTION LABとはどのようなサイトですか？

UI MOTION LABは、コーダーである「ひろん」がJavaScriptで作成したUIアニメーションの実装アーカイブを公開するサイトです。さまざまなウェブサイトで使われている動きや、ユーザー体験を向上させるためのアニメーション表現を、実際のコードとともに紹介しています。今後も新しいアニメーションを追加していく予定です。

このサイトで使用しているJavaScriptのライブラリは何ですか？

GSAPを使用しています。また、スクロールイベントにはIntersection Observer APIを使用しています。

質問項目をクリックすると回答が開閉します。

【動作】
  • 質問項目をクリックで開閉を切り替え
  • コンテンツの高さを自動で測定し、その高さに応じたアニメーションを実行
  • アニメーション中は連打防止機能が働きます
【アニメーション】
  • 高さとフェードのアニメーション
  • 開いている状態では`is-open`クラスが付与されます

5.テーマ切り替え

ボタンをクリックするとライト/ダークテーマが切り替わります。

【動作】
  • ボタンクリックでライトとダークを切り替え
  • アニメーション中は連打防止機能が働きます
【アニメーション】
  • 画面全体が上から下に塗りつぶされるように展開
  • 塗りつぶし完了時にテーマが切り替わります
  • その後、オーバーレイがフェードアウト

7.サンプルコード

サンプルコードはGitHubで公開しています。

→GitHubでサンプルコードを確認する