Skip to content

Commit 426700d

Browse files
mocaffymocaffy
authored
Merge pull request #25 from jigintern/mmy/gsap-workshop
勉強会資料作成: GSAPから始めるWebアニメーション入門
2 parents dc29765 + 7896668 commit 426700d

48 files changed

Lines changed: 27039 additions & 2 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.github/workflows/gh-pages.yml‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@ jobs:
3131
output_name: regex-handson-2025
3232
- slide: 2025/scrum-trial
3333
output_name: scrum-trial-2025
34+
- slide: 2026/gsap-workshop
35+
output_name: gsap-workshop-2026
3436
runs-on: ubuntu-latest
3537
steps:
3638
- name: Checkout
@@ -45,7 +47,7 @@ jobs:
4547
- name: Setup Node.js
4648
uses: actions/setup-node@v4
4749
with:
48-
node-version: '20'
50+
node-version: "20"
4951

5052
- name: Setup pnpm
5153
uses: pnpm/action-setup@v4
@@ -102,4 +104,4 @@ jobs:
102104
steps:
103105
- name: Deploy to GitHub Pages
104106
id: deployment
105-
uses: actions/deploy-pages@v4
107+
uses: actions/deploy-pages@v4

‎2026/gsap-workshop/.prettierrc‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"overrides": [
3+
{
4+
"files": "slide.md",
5+
"options": {
6+
"printWidth": 100
7+
}
8+
}
9+
]
10+
}

‎2026/gsap-workshop/README.md‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
# GSAP ワークショップ 〜Web アニメーションの世界へようこそ〜
2+
3+
## 概要
4+
5+
このワークショップでは、Web アニメーションライブラリ「GSAP (GreenSock Animation Platform)」を使って、
6+
魅力的なWebページを作る方法を学びます。
7+
8+
## 対象者
9+
10+
- プログラミング初心者〜中級者
11+
- Web開発に興味がある方
12+
- クリエイティブなWebサイトを作ってみたい方
13+
14+
15+
## ファイル構成
16+
17+
```
18+
gsap-workshop/
19+
├── README.md # このファイル
20+
├── slide.md # 講義スライド（講師用）
21+
├── handout.md # 配布資料（参加者用）
22+
└── examples/
23+
├── 01-gsap-intro/ # GSAP 入門
24+
├── 02-timeline/ # Timeline
25+
├── 03-scrolltrigger/ # ScrollTrigger
26+
└── 04-fukui-pr/ # 実践課題（観光PRサイト）
27+
```
28+
29+
## 準備するもの
30+
31+
- ノートPC（Windows / Mac どちらでもOK）
32+
- モダンブラウザ（Chrome 推奨）
33+
34+
## 学習ゴール
35+
36+
このワークショップを終えると、以下のことができるようになります：
37+
38+
1. ✅ HTML/CSS/JavaScript の基本構造を理解できる
39+
2. ✅ GSAP を使った基本的なアニメーションを作成できる
40+
3. ✅ Timeline で複数のアニメーションを組み合わせられる
41+
4. ✅ ScrollTrigger でスクロール連動アニメーションを実装できる
42+
5. ✅ 自分のアイデアでオリジナルアニメーションを作れる
43+
44+
## 参考リンク
45+
46+
- [GSAP 公式ドキュメント](https://greensock.com/docs/)
47+
- [GSAP Cheat Sheet](https://greensock.com/cheatsheet/)
48+
- [GSAP Ease Visualizer](https://greensock.com/docs/v3/Eases)

‎2026/gsap-workshop/examples/01-basics/fromto.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html lang="ja">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>gsap.fromTo()</title>
7+
<style>
8+
* { margin: 0; padding: 0; box-sizing: border-box; }
9+
body { background: #fff; display: flex; align-items: center; justify-content: center; height: 100vh; font-family: sans-serif; }
10+
.stage { position: relative; width: 500px; height: 120px; }
11+
.box { width: 80px; height: 80px; background: #0ae448; border-radius: 8px; position: absolute; top: 20px; left: 50%; margin-left: -40px; }
12+
.label { position: absolute; top: 0; font-size: 14px; color: #555; font-weight: bold; }
13+
.label-start { left: calc(50% - 200px - 40px); text-align: center; width: 80px; }
14+
.label-end { left: calc(50% + 200px - 40px); text-align: center; width: 80px; }
15+
</style>
16+
</head>
17+
<body>
18+
<div class="stage">
19+
<div class="label label-start">x: -200</div>
20+
<div class="label label-end">x: 200</div>
21+
<div class="box"></div>
22+
</div>
23+
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
24+
<script>
25+
gsap.fromTo(".box", { x: -200 }, { x: 200, duration: 1.2, ease: "power1.inOut", yoyo: true, repeat: -1 });
26+
</script>
27+
</body>
28+
</html>

‎2026/gsap-workshop/examples/01-basics/gsap-from.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="ja">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>gsap.from()</title>
7+
<style>
8+
* { margin: 0; padding: 0; box-sizing: border-box; }
9+
body { background: #fff; padding: 40px 60px; font-family: sans-serif; }
10+
.stage { display: flex; flex-direction: column; gap: 32px; }
11+
.row { display: flex; align-items: center; gap: 16px; }
12+
.label { font-size: 14px; color: #555; font-weight: bold; width: 220px; text-align: right; flex-shrink: 0; }
13+
.box { width: 80px; height: 80px; background: #0ae448; border-radius: 8px; flex-shrink: 0; }
14+
</style>
15+
</head>
16+
<body>
17+
<div class="stage">
18+
<div class="row"><span class="label">x (座標): -300 の状態から表示</span><div class="box" id="b1"></div></div>
19+
<div class="row"><span class="label">opacity (不透明度): 0, y (座標): 50 の状態から表示</span><div class="box" id="b2"></div></div>
20+
</div>
21+
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
22+
<script>
23+
// 左から飛んでくる
24+
gsap.from("#b1", { x: -300, duration: 1, ease: "power2.out" });
25+
26+
// 下からフェードイン
27+
gsap.from("#b2", { opacity: 0, y: 50, duration: 1, ease: "power2.out" });
28+
</script>
29+
</body>
30+
</html>

‎2026/gsap-workshop/examples/01-basics/gsap-to.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="ja">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>gsap.to() - 複数プロパティ</title>
7+
<style>
8+
* { margin: 0; padding: 0; box-sizing: border-box; }
9+
body { background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; font-family: sans-serif; }
10+
.box { width: 80px; height: 80px; background: #0ae448; border-radius: 8px; }
11+
.label { margin-top: 24px; font-size: 14px; color: #555; font-weight: bold; }
12+
</style>
13+
</head>
14+
<body>
15+
<div class="box"></div>
16+
<div class="label">右に200px移動 / 360°回転 / 2倍に拡大 / 角丸→円形</div>
17+
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
18+
<script>
19+
// 複数プロパティを同時にアニメーション
20+
gsap.to(".box", {
21+
x: 200,
22+
rotation: 360,
23+
scale: 2,
24+
borderRadius: "50%",
25+
duration: 1.2,
26+
ease: "power2.inOut",
27+
});
28+
</script>
29+
</body>
30+
</html>

‎2026/gsap-workshop/examples/01-basics/set.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="ja">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>gsap.set()</title>
7+
<style>
8+
* { margin: 0; padding: 0; box-sizing: border-box; }
9+
body { background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; font-family: sans-serif; }
10+
.box { width: 120px; height: 120px; background: #0ae448; border-radius: 8px; }
11+
.label { margin-top: 24px; font-size: 14px; color: #555; font-weight: bold; }
12+
</style>
13+
</head>
14+
<body>
15+
<div class="box"></div>
16+
<div class="label">① set() で即座に赤＆右に移動 → ② to() で青にしながら更に右へ</div>
17+
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
18+
<script>
19+
// ① 即座に赤に変更に移動（アニメーションなし）
20+
gsap.set(".box", { backgroundColor: "#e74c3c" });
21+
22+
// ② 青にしながら更に右へアニメーション
23+
gsap.to(".box", { backgroundColor: "#3498db", x: 200, duration: 2 });
24+
</script>
25+
</body>
26+
</html>

‎2026/gsap-workshop/examples/01-basics/setup-basic.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="ja">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>GSAP セットアップ確認</title>
7+
<style>
8+
* { margin: 0; padding: 0; box-sizing: border-box; }
9+
body { background: #fff; display: flex; align-items: center; justify-content: center; height: 100vh; font-family: sans-serif; }
10+
.box { width: 80px; height: 80px; background: #0ae448; border-radius: 8px; }
11+
</style>
12+
</head>
13+
<body>
14+
<div class="box"></div>
15+
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
16+
<script>
17+
gsap.to(".box", { x: 300, duration: 1, ease: "power1.inOut", yoyo: true, repeat: -1 });
18+
</script>
19+
</body>
20+
</html>

‎2026/gsap-workshop/examples/02-properties/duration-delay.html‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
<html lang="ja">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>duration & delay</title>
7+
<style>
8+
* { margin: 0; padding: 0; box-sizing: border-box; }
9+
body { background: #fff; display: flex; align-items: center; height: 100vh; font-family: sans-serif; }
10+
.stage { display: flex; flex-direction: column; gap: 16px; }
11+
.row { display: flex; align-items: center; gap: 16px; }
12+
.label { font-size: 14px; color: #555; font-weight: bold; width: 100px; text-align: right; }
13+
.box { width: 80px; height: 80px; background: #0ae448; border-radius: 8px; flex-shrink: 0; }
14+
</style>
15+
</head>
16+
<body>
17+
<div class="stage">
18+
<div class="row"><span class="label">delay: 0s</span><div class="box" id="b1"></div></div>
19+
<div class="row"><span class="label">delay: 0.2s</span><div class="box" id="b2"></div></div>
20+
<div class="row"><span class="label">delay: 0.4s</span><div class="box" id="b3"></div></div>
21+
</div>
22+
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
23+
<script>
24+
gsap.to("#b1", {
25+
x: 300,
26+
duration: 1, // 移動時間は 1 秒
27+
delay: 0, // すぐ出発
28+
ease: "power2.out",
29+
repeat: -1,
30+
yoyo: true,
31+
repeatDelay: 1 // 両端で 1 秒止まる
32+
});
33+
gsap.to("#b2", {
34+
x: 300,
35+
duration: 1,
36+
delay: 0.2, // 0.2秒遅れて出発
37+
ease: "power2.out",
38+
repeat: -1,
39+
yoyo: true,
40+
repeatDelay: 1
41+
});
42+
gsap.to("#b3", {
43+
x: 300,
44+
duration: 1,
45+
delay: 0.4, // 0.4秒遅れて出発
46+
ease: "power2.out",
47+
repeat: -1,
48+
yoyo: true,
49+
repeatDelay: 1
50+
});
51+
</script>
52+
</body>
53+
</html>

‎2026/gsap-workshop/examples/02-properties/easing-comparison.html‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html lang="ja">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Easing Comparison</title>
7+
<style>
8+
* { margin: 0; padding: 0; box-sizing: border-box; }
9+
body { background: #fff; font-family: sans-serif; padding: 30px 0; }
10+
.row { display: flex; align-items: center; margin-bottom: 16px; }
11+
.label { width: 140px; font-size: 16px; font-weight: bold; color: #333; }
12+
.box { width: 50px; height: 50px; background: #0ae448; border-radius: 8px; }
13+
</style>
14+
</head>
15+
<body>
16+
<div class="row">
17+
<span class="label">power1.out</span>
18+
<div class="box" id="b1"></div>
19+
</div>
20+
<div class="row">
21+
<span class="label">power3.in</span>
22+
<div class="box" id="b2"></div>
23+
</div>
24+
<div class="row">
25+
<span class="label">bounce.out</span>
26+
<div class="box" id="b3"></div>
27+
</div>
28+
<div class="row">
29+
<span class="label">elastic.out</span>
30+
<div class="box" id="b4"></div>
31+
</div>
32+
<div class="row">
33+
<span class="label">back.out</span>
34+
<div class="box" id="b5"></div>
35+
</div>
36+
<div class="row">
37+
<span class="label">steps(5)</span>
38+
<div class="box" id="b6"></div>
39+
</div>
40+
41+
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
42+
<script>
43+
gsap.to("#b1", { x: 300, duration: 2, ease: "power1.out", repeat: -1, repeatDelay: 1 });
44+
gsap.to("#b2", { x: 300, duration: 2, ease: "power3.in", repeat: -1, repeatDelay: 1 });
45+
gsap.to("#b3", { x: 300, duration: 2, ease: "bounce.out", repeat: -1, repeatDelay: 1 });
46+
gsap.to("#b4", { x: 300, duration: 2, ease: "elastic.out", repeat: -1, repeatDelay: 1 });
47+
gsap.to("#b5", { x: 300, duration: 2, ease: "back.out", repeat: -1, repeatDelay: 1 });
48+
gsap.to("#b6", { x: 300, duration: 2, ease: "steps(5)", repeat: -1, repeatDelay: 1 });
49+
</script>
50+
</body>
51+
</html>

0 commit comments

Comments
 (0)