デモ

スライドが切り替わるごとにトランジションアニメーションを行うカルーセルです。スライド内部はビューポートのアスペクト比によってレイアウトを変えるレスポンシブデザインになっています。ボタンにもトランジションアニメーションを加えています。

スライダーライブラリ: Embla Carousel
デザイン: Figma Community

GSAPのScrollTriggerとFlipを使って、スクロールに合わせて中央の画像が拡大し、画面いっぱいになったところで上へ流れていく演出のデモです。端末OSの視覚効果の設定によってアニメションを抑制する実装にしています。GSAP公式ギャラリーのデモをもとに、Tailwind CSSでスタイリングしています。また、タイトルを追加し、アニメーションに合わせてタイポグラフィが変わるようにしています。

アニメーションライブラリ: GSAP
出典： Scrubbed bento gallery

AstroのClientRouter（View Transitions）を使って、一覧画面と詳細画面の間でページ遷移する際にアートワーク画像が移動するアニメーションを加えるデモです。アートワーク画像を含めた楽曲データはiTunes Search APIを使って取得しています。

フレームワーク: Astro
データ: iTunes Search API

GSAPのScrollTriggerを使って、特定のエリアまでスクロールすると横スクロールに切り替わるデモです。横スクロールエリアに入ると、スワイプ（横スクロール）してもスクロールできます。

アニメーションライブラリ: GSAP

マウスカーソルに追従する目玉のアニメーションのデモです。

アニメーションライブラリ: GSAP