今回は、GSAPを使って本格的なWebギャラリーを制作する方法を紹介した動画を公開しました。
初心者の方でも理解しやすいように、HTML・CSS・JavaScriptの基本構成から、
実際のアニメーション部分までしっかり解説しています。
💡 動画の内容
今回の動画では、次のような実装を紹介しています👇
✅ タイトル文字のアニメーション — 文字が一文字ずつ動く
✅ カードアニメーション — スクロール時にふわっと登場
✅ モーダルウィンドウ — カードクリックで詳細表示
✅ 閉じる動作もGSAPで自然にフェードアウト
✅ ダークモード切替 — ワンクリックでテーマ変更
「ただ動くだけ」ではなく、**デザインの流れを大事にした“魅せるUIアニメーション”**を意識しています。
🧩 使用した主なコードポイント
gsap.to(".card", {
opacity: 1,
y: 0,
stagger: 0.15,
ease: "power2.out"
});
modalTitle.textContent = card.dataset.title;
document.body.classList.toggle("dark");
GSAPの stagger（順番アニメーション）や
dataset（HTML属性データの取得）など、実務でもよく使うテクニックを活かしています。
👉 YouTubeで見る（あなたの動画URL）
ショート動画なので1分以内でサクッと見られます🎬
コードを見ながらアニメーションの仕組みを理解したい方におすすめです。
🧠 こんな方におすすめ
Webデザイン・コーディングを勉強中の方
GSAPを使ってみたいけど何から始めればいいか分からない方
ポートフォリオサイトをおしゃれに仕上げたい方
💬 まとめ
GSAPは、Webデザインを“静”から“動”に変える強力なライブラリです。
HTMLとCSSの知識があれば、誰でも簡単に導入できます。
今回のサンプルをベースに、あなたのサイトにも動きを加えてみてください！
