【WEB開発】JavaScript - GSAP - Tech Labo F

JavaScriptでリッチなアニメーションが作れるGSAP

ぜひ、この機会に学んでいきましょう。

1. GSAPとは？

GSAP（GreenSock Animation Platforn）とは、 Javascriptで制作する強力なアニメーションライブラリーになります。

使用することで、CSSでは難しい細かい制御や複雑な動きが簡単に実装できます。

・ポイント

　1. JavaScriptで使える → 幅広い環境下で動作させられる
　2. 複雑なアニメーションを簡単に実装できる
　3. CSSでは難しいタイミングの制御が可能

2. TWEEN

GSAPのアニメーションは、「TWEEN（ツイーン）」という概念で動きます。 TWEENの役割は、「ある状態から別の状態へ変化させる」という部分です。

3. GSAPの使い方

GSAPには４つの基本的なメソッドがあります。

gsap.set(".box", { opacity: 0 } );　// 初期状態を設定
gsap.to(".box", { opacity: 1, duration: 1 });　// 変化させる
gsap.from(".box", { x: -100, duration: 1 });　// 初期値からアニメーション
gsap.fromTo(".box", { opacity: 0 }, {.opacity: 1, duration: 1 });　// 初期値からアニメーションserif;

4. CSSの知識で使える

GSAPのプロパティは、CSSのプロパティとほとんど同じなので、CSSの知識があれば理解できます。ただ、GSAP独自プロパティもあるので、使い方を覚えればより柔軟にアニメーションを設定できます。

4. GSAP独自の機能

stagger（時間差でアニメーションをずらせられる）

複数の要素を時間差でアニメーションさせる便利な機能です。

gsap.to(".box", { y: 100, stagger: 0.2, duration: 1 } );

タイムラインアニメーション

timeline() を使うと、アニメーションを順番に組み立てる事ができる

let tl = gsap.timeline();
tl.to(".box1", { x: 100, duration: 1 })
  .to(".box2", {.x: 100, duration: 1 }, "+=0.5") // 0.5秒遅らせて実行

スクロール連動アニメーション

ScrollTriggerというプラグインがあり、スクロールに応じたアニメーションが簡単に作れます。

gsap.to(".box",  {
　　　　scrollTrigger: ".box",
　　　　opacity: 1;,
　　　　y: 0,
　　　　duration: 1
});

今回のまとめ

用語	意味
GSAP	JavaScriptで使える高性能なアニメーションライブラリ。 CSSでは難しい細かい制御やタイミング調整が可能。
TWEEN	GSAPアニメーションの基本概念。「ある状態から別の状態へ変化させる」役割を担う。
stagger	複数の要素を時間差でアニメーションさせる便利な機能
タイムラインアニメーション	アニメーションを順番に組み立てる事ができる
スクロール連動アニメーション	スクロールに応じたアニメーションが簡単に作れる

【WEB開発】JavaScript – GSAP