デモ
Icecream
スライドが切り替わるごとにトランジションアニメーションを行うカルーセルです。スライド内部はビューポートのアスペクト比によってレイアウトを変えるレスポンシブデザインになっています。ボタンにもトランジションアニメーションを加えています。
- スライダーライブラリ
- Embla Carousel
- デザイン
- "Ice Cream Transition" by Mustafa Lanewala (Figma Community) / CC BY 4.0
※モバイル端末（orientation: portrait）でのデザインは実装者が追加しました。
scrubbed-gallery
GSAPのScrollTriggerとFlipを使って、スクロールに合わせて中央の画像が拡大し、画面いっぱいになったところで上へ流れていく演出のデモです。GSAP公式ギャラリーのデモをもとに、Tailwind CSSでスタイリングしています。
端末OSの視覚効果の設定（prefers-reduced-motion）によってアニメションを抑制する実装にしています。
また、タイトルを追加し、アニメーションに合わせてタイポグラフィが変わるようにしています（バリアブルフォントのため、フォントサイズだけでなくフォントウェイトもなめらかに変わります）。
- アニメーションライブラリ
- GSAP
- 出典
- Scrubbed bento gallery
music-library
AstroのClientRouter（View Transitions）を使って、一覧画面と詳細画面の間でページ遷移する際にアートワーク画像が移動するアニメーションを加えるデモです。アートワーク画像を含めた楽曲データはiTunes Search APIを使って取得しています。
- フレームワーク
- Astro
- データ
- iTunes Search API
scroll-trigger-vertical
GSAPのScrollTriggerを使って、特定のエリアまでスクロールすると横スクロールに切り替わるデモです。横スクロールエリアに入ると、スワイプ（横スクロール）してもスクロールできます。
- アニメーションライブラリ
- GSAP
follow-eyes（タッチデバイス非対応）
マウスカーソルに追従する目玉のアニメーションのデモです。
- アニメーションライブラリ
- GSAP