TimelineMaxで要素の動きを制御する。

前章: GreenSock簡単チュートリアルの続きです。

概要

このチャプターでは上記のGIFのような、アニメーションの順番を制御するTimelineMaxについて学びます。

TimelineMax

index.js

import { TweenMax, TimelineMax } from "gsap";

TweenMax.set("#box", {
  backgroundColor: "green",
  width: "50px",
  height: "50px",
  x: "50px",
  y: "50px"
});

const timeline = new TimelineMax();

//timeline.to( target:Object, duration:Number, vars:Object, position:* ) 
timeline.to("#box", 0.5, { x: 100 });
timeline.to("#box", 0.5, { y: 100 });
timeline.to("#box", 0.5, { x: 50 });
timeline.to("#box", 0.5, { y: 50 });

timeline.resume();

TweenMax.setは前回と同様です。
const timeline = new TimelineMax();で新しいインスタンスを生成して使います。
timelline.toを順番に記述することで、実行順序を指定し、timeline.resume();で実行しています。
ページをリロードすると時計回りに要素が動いたでしょうか？

続いてGIFのようなクリックイベントでアニメーションの実行を制御していきます。

index.js

import { TweenMax, TimelineMax } from "gsap";

TweenMax.set("#box", {
  backgroundColor: "green",
  width: "50px",
  height: "50px",
  x: "50px",
  y: "50px"
});

const timeline = new TimelineMax({ repeat: -1 });

timeline.pause();//初期状態でtimelineをポーズします。

timeline.to("#box", 0.5, { x: 100 });
timeline.to("#box", 0.5, { y: 100 });
timeline.to("#box", 0.5, { x: 50 });
timeline.to("#box", 0.5, { y: 50 });

//クリックイベントでアニメーションの実行を制御します。
document.querySelector("#box").addEventListener("click", () => {
  if (timeline.isActive()) {
    timeline.pause();
  } else {
    timeline.resume();
  }
});

timelineはisActiveメソッドで実行中か否かの判定が可能なのでこちらを利用してstart/pouse機能を実装します。
そのほかにも数多くの機能があるので興味がある人は公式ドキュメントで確認してください。

ここまでのDemoはこちら

次回は複数要素のアニメーションの扱い方を学んでいきます。