GSAP備忘録(その1)

GSAP備忘録(その1)

目次
  1. はじめに
  2. トゥイーンの基本
  3. アニメーションの制御
  4. タイムライン
  5. ScrollTriggerプラグイン
  6. TextPluginプラグイン

はじめに

アニメーションライブラリを使えば、ブラウザの互換性が担保され、複雑になるタイミングの計算が不要になり、嬉しいことばかりです
GSAPは、GSAP2からGSAP3に移行して、より使いやすくなりました😊

無料枠の利用でも超便利です
*GSAPはMITライセンスではなく、複数のエンドユーザーに販売するプロジェクトでは有料のビジネスライセンスが必要です

ちなみに、GSAPの全てのプラグインをCodepenでは無料で試すことができます

最も簡単な方法は、次のようなスクリプトタグをページに追加して使用します

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>

個々のアニメーションを「トゥイーン
トゥイーンを組み合わせたコンテナのイメージが「タイムライン
*アニメーションを順番に実行するときは、ほぼ「タイムライン」を使用

トゥイーンの基本

gsap.method(element, duration, {obj})

to()
終わりの状態を指定します

  • 第一引数は、ターゲット
    ターゲットには、オブジェクト、オブジェクトの配列、またはセレクターをテキスト(”.myClass”)にすることができます
  • 第二引数は、「アニメーション化するプロパティと値のペアのオブジェクト」・「特別なプロパティ」

durationとdelayの初期値は0.5秒、単位の初期値はpx、 easeの初期値は「power1.out(終わり向けて緩やかに減速)」

gsap.to(".orange", 2, { x: 300});

DOM要素にプロパティがなくても、「CSSPlugin」と呼ばれるコアプラグイン(GSAPのコアに含まれているプラ​​グイン)により、インラインスタイルで適用されます

GSAPCSS
x: 100transform: translateX(100px)
y: 100transform: translateY(100px)
rotation: 360transform: rotate(360deg)
rotationX: 360transform: rotateX(360deg)
rotationY: 360transform: rotateY(360deg)
skewX: 45skewX(45deg)
skewY: 45skewY(45deg)
scale: 2scale(2, 2)
scaleX: 2scaleX(2)
scaleY: 2scaleY(2)
xPercent: -50transform: translateX(-50%)
yPercent: -50transform: translateY(-50%)
  • プロパティはキャメルケースを使用「background-color」は「backgroundColor」にします
  • topやleftなどの位置プロパティをアニメーション化する場合、移動しようとしている要素のpositionはabsolute・relative・fixedです

CSSのプロパティではなく属性をアニメーションしたい時は「AttrPlugin」(コアプラグイン)が利用できます

<svg>
<rect id="rect" fill="red" x="0" y="0" width="100" height="100"></rect>
</svg>

gsap.to("#rect", 1, {attr:{x:300}});

from()
スタートの状態を指定します

gsap.from(".gray, 2, {x: 300});

fromTo()
開始値と終了値を定義できます

// 150 から 300
gsap.fromTo(".pink", 2, {x: 150}, { x: 300});

set()
durationがゼロのto()と同じ

gsap.set(".pink",  {x: 100});

トゥイーンのプロパティ

delay
アニメーションを開始する前の遅延
onComplete
アニメーションの終了時に呼び出されるコールバック
各コールバック関数には、オプションで任意の数のパラメーターを渡すことができます。複数のパラメーターが存在する可能性があるため、パラメーターは配列として渡す必要があります(パラメーターが1つしかない場合でも
onUpdate:アニメーションが更新/レンダリングされるたびに呼び出されるコールバック
onStart:アニメーションの開始時に呼び出されます
onRepeat:アニメーションが繰り返されるたびに呼び出されます
onReverseComplete:アニメーションが反転されたときに再び開始に達したときに呼び出されます
stagger
要素アニメーションの開始時間をずらします
例:stagger:0.1(それぞれの開始時間を0.1秒間ずらすことができる)
ease
アニメーションの進め方(加速曲線)
デフォルト:「power1.out」
Ease Visualizer
repeat
アニメーションが繰り返される回数
-1は無限
repeatDelay
繰り返し間の時間(秒単位)
yoyo
trueの場合、再生は繰り返しごとに順方向と逆方向に交互になります
yoyoEase:”:yoyoのeaseを設定できます

アニメーションの制御

//操作するインスタンスを変数として保存
const tween = gsap.to("#logo", {duration: 1, x: 100});

//一時停止
tween.pause();

//再開
tween.resume();

//最初から順方向に再生を開始します。
tween.restart();

//逆方向に再生
tween.reverse();

//0.5秒ジャンプ
tween.seek(0.5);

//進行状況の正確に1/4にジャンプ
tween.progress(0.25);

//倍速
tween.timeScale(2);

//強制終了
tween.kill();
const button = document.querySelector('.button')
const tween = gsap.to(button, {scale:1, repeat:10, yoyo:true, paused:true});
//マウスがのった時
button.addEventListener("mouseenter", function(){
tween.restart();
})
//マウスが離れたとき
button.addEventListener("mouseleave", function(){
tween.pause();
gsap.to(button, {scale:0.8});
})

タイムライン

let tl = gsap.timeline({obj1})
tl.method(element, {obj2})

//obj1はタイムラインで共通のプロパティ
//obj2はトゥイーンのプロパティ

timeline()

連続したアニメーションのために設定する個々のトゥイーンの「delay(遅延時間)」が不要になります

  • アニメーションのグループ全体を制御します
  • 前のアニメーションのタイミング調整が後のアニメーションに自動的に影響します
  • モジュール化する(複雑なアニメーションはパネルごとに分割して作成する)
  • アニメーションのグループに基づいてコールバックを起動する(アニメーションがすべて完了したら、myFunction()呼び出すなど)

2つのトゥイーンが連続して再生されます
メソッドチェーンは、コードを簡潔にできます

const tl = gsap.timeline();
tl.to(".orange", 1, { x: 200, scale: 0.2});
tl.to(".gray", 1, {x: 200, scale: 1.5});

//メソッドチェーンにする
tl.to(".orange", 1,{ x: 200, scale: 0.2})
 .to(".gray", 1, { x: 200, scale: 1.5});

デフォルトでは、アニメーションは次々に挿入されますが、「positionパラメータ」を使用して制御できます

  • positionパラメータが指定されていない場合:すべてのトゥイーンは連続して実行されます
  • 絶対値(数値):タイムライン開始からの時間を秒単位で指定します。
  • 正の相対値( “+=X”): タイムラインの終了からX秒後にトゥイーンを配置します
  • 負の相対値( “-=X”): オーバーラップ(タイムラインが終了するX秒前にトゥイーンを配置します)
  • ラベル(「文字列」): トゥイーンを配置する場所を指定
  • 他のトゥイーンと比較
    “<“前のアニメーションの開始時刻を参照するために 使用します(”< 3″は前のアニメーションの開始から3秒後 )
  • “>”前のアニメーションの終了時刻を参照するために使用します(”> -0.5″は前のアニメーションが終了する0.5秒前)
const timeline2 = gsap.timeline();
timeline2.to(".orange, 1,{x:200})
  .to(".orange", 1,{x:200, scale: 0.2}, "+=1")
  .addLabel("greyAndPink")
  .to(".gray", 1,{x: 200, scale: 1.5, y: 20}, "greyAndPink") 
  .to(".pink", 1,{x: 200, rotation: 360}, "greyAndPink<2"); 

「トゥイーンのプロパティ」はすべての子トゥイーンとタイムラインに値を継承させるために使用できる「タイムラインのデフォルト(全てのトゥイーンで共通)」として設定できます
例:gsap.timeline({duration: 1})
*デフォルトから継承されたプロパティは、個々のトゥイーンで、新しい値を設定して上書きできます

keyframesを使用できます

const timeline = gsap.timeline();
timeline.to(".circle",{
keyframes:{
"25%":{y:-250},
"100%":{x:300, y:0, ease: "none"},
},
duration:2,
stagger:0.5
})

Staggersは要素アニメーションの開始時間をずらします

HTML・CSSを見る

<style>
.c-wrap{
  width:300px;
  height:300px;
  margin:10px auto;
  overflow: hidden;
  position:relative;
  border: solid 1px #ddd;
}
.circle{
  width:50px;
  height:50px;
  background-color: aqua;
  border-radius:50%;
  position:absolute;
  bottom:0; 
  transform: translateX(-50px)
}
</style>
<div class="c-wrap">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>

タイムライン制御
paused()は、アニメーションが現在一時停止されているかどうかを示す、アニメーションの一時停止状態を取得または設定します(デフォルトではfalseなので、クリックイベント等で制御するときはgsap.timeline({paused: true})にして停止させたりします)
タイムラインとトゥイーンは、共通の制御方法のセットを共有します
タイムラインの再生ヘッドを一時停止すると、すべての子に自動的に影響します


add()メソッドを使用すると、タイムラインの任意の場所にトゥイーン、タイムライン、ラベル、コールバックを追加できます。

ScrollTriggerプラグイン

「duration(間隔)の代わり」に「スクロールイベントの状態をトリガー」にアニメーション設定します(IntersectionObserverのように使います)

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js"></script>
<script>
gsap.registerPlugin(ScrollTrigger);
</script>

ドキュメントの例

let tl = gsap.timeline({
// タイムライン全体に追加できます
    scrollTrigger: {
      trigger: ".container",
//アクティブなときにトリガー要素を固定します
      pin: true,  
// トリガーの上部がビューポートの上部に当たったとき
      start: "top top",
// 開始を500px超えてスクロールした後に終了
      end: "+=500", 
//スムーズスクロール 「追いつく」のに1秒かかります
      scrub: 1,
      snap: {
// タイムラインで最も近いラベルにスナップします
        snapTo: "labels", 
// スナップアニメーションは0.2秒以上、3秒以下である必要があります(速度によって決定されます)
        duration: {min: 0.2, max: 3},
// スナップを実行する前に、最後のスクロールイベントから0.2秒待機します
        delay: 0.2, 
// スナップアニメーションのイージング
        ease: "power1.inOut" 
      }
    }
  });

//タイムラインにアニメーションとラベルを追加する
tl.addLabel("start")
  .from(".box p", {scale: 0.3, rotation:45, autoAlpha: 0})
  .addLabel("color")
  .from(".box", {backgroundColor: "#28a92b"})
  .addLabel("spin")
  .to(".box", {rotation: 360})
  .addLabel("end");

スクラブアニメーション(スクロールと連動して少しずつ動くアニメーション)は、scrubにtureか数値、endにアニメーションの終了点を設定します
scrubの数値が大きいほど動きが遅れます

デバックにはmarkers:trueを設定すると便利です

オンの時にCSSクラスを追加しオフの時にCSSクラスを外したい場合はset()を使います

  gsap.set('#target', {
        scrollTrigger: {
            trigger: '#target',
            start: 'top bottom-=150',
            end: 'bottom center-=150',
//activeクラス
            toggleClass: 'active',
            markers: true
        }
    })

パララックスにします(スクロールなどの動作に応じて、要素を異なるスピードで動かします)

Parallax

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed.

コードを見る

<div class="gsap-parallax">
          <div class="gsap-img"></div>
          <div class="gsap-content">
              <h1>Parallax</h1>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed.</p>
          </div>
 </div>
.gsap-parallax {
    color: #fff;
    background-color: #000;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.gsap-img {
    background: url('') no-repeat;
    background-size: cover;
    position: absolute;
    width: 100%;
    height: 150%;
    top: 0;
    z-index: 1;
    opacity: 0.7;
}
.gsap-content {
    width: 90%;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
gsap.registerPlugin(ScrollTrigger);   
const parallaxTl = gsap.timeline({
        ease: 'none',
        scrollTrigger: {
            trigger: '.gsap-parallax',
            start: 'top bottom',
            scrub: true
        }
    });
parallaxTl
//autoAlphaはopacityとvisibilityを組み合わせたような形で表示非表示の変更に使える
    .from('.gsap-content', { duration: 1, autoAlpha: 0 }, 1)
    .from('.gsap-img', {duration:3, y: '-50%'}, 0)

toggleActions
4つの異なるトリガーの場所(onEnter、onLeave、onEnterBack、onLeaveBack )で、アニメーションをこの順序でどのように制御するかを決定します
デフォルトはtoggleActions:"play none none none"
"play", "pause", "resume", "reset", "restart", "complete", "reverse", "none"

toggleActions: "play pause resume reset"だと入るときにアニメーションを再生し、出るときに一時停止し、再び逆方向に入るときに再開し、最初から最後までスクロールするとリセット(最初に巻き戻す)します

TextPluginプラグイン

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/TextPlugin.min.js"></script>
<script>
gsap.registerPlugin(TextPlugin); 
</script>

テキストコンテンツを1文字ずつ(delimiter: " "を設定した場合は一度に1語ずつ)置き換えます

gsap.to("#element", {
    duration: 2,
    text: {
        value: "This is the new text",
        delimiter: " "
    },
    ease: "none"
});

newClassでテキストに適用するCSSクラスを追加し、新しいテキストを古いテキストと視覚的に区別する時に使います

gsap.to("#element", {
    duration: 5,
    text: {
        value: "NEW",
        newClass: "class2",
        oldClass: "class1"
    },
    ease: "power2"
});

OLD