アニメーションライブラリ「GSAP」を使うと、以下のように複数要素のアニメーション順を制御することができます。
See the Pen GSAP タイムライン機能 by E-VALUE WORKS (@evw) on CodePen.
今回は、GSAPのタイムラインを使って複数要素のアニメーション順を制御する方法を解説します。
※本記事執筆時点のGSAPバージョンは、「3.13.0」です。ご利用の時期や環境によっては、内容が異なる場合がありますので、あらかじめご了承下さい。
GSAPのインストール方法
まずはGSAPをインストールしましょう。
GSAPのインストール方法は以下の記事で解説していますので、こちらをご覧ください。
GSAPのタイムライン機能の使い方
今回は以下のような例のデモを作りながらタイムラインの使い方を解説します。
See the Pen GSAP タイムライン制御 デモ by E-VALUE WORKS (@evw) on CodePen.
HTML、CSSは以下を使用します。
<div class="wrap">
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
</div>.wrap {
display: flex;
align-items: center;
height: 100vh;
}
.box {
width: 80px;
height: 80px;
margin: 0 10px;
background: #4caf50;
opacity: 0;
}STEP. 1：タイムラインインスタンスを作成する
まずは、タイムラインインスタンスを作成します。
タイムラインインスタンスはtimelineメソッドを呼び出すことで作成できます。
以下の例では、そのインスタンスをtlという変数に代入しています
document.addEventListener("DOMContentLoaded", () => {
const tl = gsap.timeline();
});STEP. 2：アニメーションを追加する
次に、tlにアニメーションを追加します。
今回は、今ある状態から指定した状態へアニメーションさせられるメソッドである「to」を追加します。
document.addEventListener("DOMContentLoaded", () => {
const tl = gsap.timeline();
tl.to("#box1", { x: 30, opacity: 1, duration: 1, ease: "power2.out"})
.to("#box2", { x: 60, opacity: 1, duration: 1, ease: "power2.out", backgroundColor: "#2196f3" })
.to("#box3", { x: 90, opacity: 1, duration: 1, ease: "power2.out", 1ackgroundColor: "#ff9800" });
});See the Pen GSAP タイムライン機能 デモ作成 プロセス1 by E-VALUE WORKS (@evw) on CodePen.
上のように、開始させたいアニメーションを順番に上から記述することで、記述した順にアニメーションが連続して再生されます。
なお、タイムライン作成時にdefaultsオプションを使うことで、共通する設定（durationやeaseなど）をまとめて指定できます。
document.addEventListener("DOMContentLoaded", () => {
const tl = gsap.timeline({
defaults: { duration: 1, ease: "power2.out", opacity: 1 }
});
tl.to("#box1", { x: 30 })
.to("#box2", { x: 60, backgroundColor: "#2196f3" })
.to("#box3", { x: 90, backgroundColor: "#ff9800" });
});上の例では.to()のみを使用していますが、.from()や.fromTo()を組み合わせることも可能です。
STEP. 3：アニメーション実行タイミングを細かく調整する
デフォルトでは、アニメーションはタイムラインの末尾に追加され、前のアニメーションが終わったあと直後に次のアニメーションが順番に実行されるようになっています。
この実行タイミングを少し調整したい場合は、.to()や .from()メソッドに準備された3つ目のパラメーター（positionパラメーター） に値を指定します。
以下のように、「”+=1″」とすると、「タイムラインの末尾から1秒たった後」のタイミングで、次のアニメーションを始められます。
document.addEventListener("DOMContentLoaded", () => {
const tl = gsap.timeline({
defaults: { duration: 1, ease: "power2.out", opacity: 1 }
});
tl.to("#box1", { x: 30 })
.to("#box2", { x: 60, backgroundColor: "#2196f3" }, "+=1")
.to("#box3", { x: 90, backgroundColor: "#ff9800" }, "+=1");
});See the Pen GSAP タイムライン制御 デモ作成2 by E-VALUE WORKS (@evw) on CodePen.
逆に、タイムラインの末尾からちょっと手前で次のアニメーションを始めさせたい場合は、「”-=1″」のように記述します。
See the Pen GSAP タイムライン制御 デモ作成3 by E-VALUE WORKS (@evw) on CodePen.
他にも以下のような指定の仕方があります。
数値のみ（例：1、3 ）：タイムラインの開始から何秒後にアニメーションを実行（絶対指定）
以下のように、「1」と数値のみを指定すると、タイムラインが開始されてから何秒後にアニメーションを実行するかを指定できます。
下の例では、2番目と3番目のアニメーションにどちらも「1」が設定されているため、タイムラインが開始（タイムラインに追加されている1番最初のアニメーションが開始）されてから1秒後に2番目、3番目のアニメーションが同時に始まります。
document.addEventListener("DOMContentLoaded", () => {
const tl = gsap.timeline({
defaults: { duration: 1, ease: "power2.out", opacity: 1 }
});
tl.to("#box1", { x: 30 })
.to("#box2", { x: 60, backgroundColor: "#2196f3" }, 1)
.to("#box3", { x: 90, backgroundColor: "#ff9800" }, 1);
});See the Pen GSAP タイムライン制御 デモ作成4 by E-VALUE WORKS (@evw) on CodePen.
“<“：1つ前のアニメーションの開始時点と同じタイミングでアニメーションを実行
「”<“」と記述する、1つ前のアニメーションの開始時点と同じタイミングでアニメーションを実行できます。
下の例では、2つ目に追加したアニメーションに「”<“」を記載しているため、1つ目と2つ目のアニメーションが同時に開始されてから、3番目のアニメーションが始まります。
document.addEventListener("DOMContentLoaded", () => {
const tl = gsap.timeline({
defaults: { duration: 1, ease: "power2.out", opacity: 1 }
});
tl.to("#box1", { x: 30 })
.to("#box2", { x: 60, backgroundColor: "#2196f3" }, "<")
.to("#box3", { x: 90, backgroundColor: "#ff9800" });
});See the Pen GSAP タイムライン制御 デモ作成5 by E-VALUE WORKS (@evw) on CodePen.
また、”<2″のように記述することで、1つ目のアニメーションの開始時点から2秒経ってから次のアニメーションを開始させることもできます。
document.addEventListener("DOMContentLoaded", () => {
const tl = gsap.timeline({
defaults: { duration: 1, ease: "power2.out", opacity: 1 }
});
tl.to("#box1", { x: 30 })
.to("#box2", { x: 60, backgroundColor: "#2196f3" }, "<2")
.to("#box3", { x: 90, backgroundColor: "#ff9800" });
});See the Pen Untitled by E-VALUE WORKS (@evw) on CodePen.
“>”：1つ前のアニメーションの終了時点と同じタイミングでアニメーションを実行
「”>“」と記述する、1つ後のアニメーションの開始時点と同じタイミングでアニメーションを実行できます。
以下の例では、1つ目のアニメーションが終了すると同時に2つ目のアニメーションが開始し、さらに2つ目のアニメーションが終了すると3つ目のアニメーションが開始されるため、デフォルトの状態と同じ動作になります。
document.addEventListener("DOMContentLoaded", () => {
const tl = gsap.timeline({
defaults: { duration: 1, ease: "power2.out", opacity: 1 }
});
tl.to("#box1", { x: 30 })
.to("#box2", { x: 60, backgroundColor: "#2196f3" }, ">")
.to("#box3", { x: 90, backgroundColor: "#ff9800" }, ">");
});See the Pen GSAP タイムライン制御 デモ作成7 by E-VALUE WORKS (@evw) on CodePen.
こちらも”>1″のようにすることで、1つ前のアニメーションの終了時点から1秒後にアニメーションを開始させられます。
document.addEventListener("DOMContentLoaded", () => {
const tl = gsap.timeline({
defaults: { duration: 1, ease: "power2.out", opacity: 1 }
});
tl.to("#box1", { x: 30 })
.to("#box2", { x: 60, backgroundColor: "#2196f3" }, ">1")
.to("#box3", { x: 90, backgroundColor: "#ff9800" }, ">");
});See the Pen GSAP タイムライン制御 デモ作成8 by E-VALUE WORKS (@evw) on CodePen.
タイムライン内に独自のコールバック関数を追加する方法
タイムラインにはgsap.to()のようなアニメーションだけでなく、独自に定義したコールバック関数も追加できます。
このコールバック関数は、.add()メソッドを使ってタイムライン内の任意のタイミングに挿入できます。
document.addEventListener("DOMContentLoaded", () => {
const tl = gsap.timeline({
defaults: { duration: 1, ease: "power2.out", opacity: 1 }
});
tl.to("#box1", { x: 30 })
.add(() => console.log("box1のアニメーションが終わりました"))
.to("#box2", { x: 60, backgroundColor: "#2196f3" })
.add(() => console.log("box2のアニメーションが終わりました"))
.to("#box3", { x: 90, backgroundColor: "#ff9800" })
.add(() => console.log("すべてのアニメーションが終わりました！"));
});See the Pen GSAP タイムライン制御 デモ作成9 by E-VALUE WORKS (@evw) on CodePen.
まとめ
今回はGSAPのタイムライン機能を使って、複数要素のアニメーション順を制御する方法を解説しました。
GSAPのタイムライン機能を使うと、より直感的かつ効率的にアニメーションの順序を制御できるようになります。
これまでtransition-delayやanimation-delay、setTimeoutなどでアニメーションの順序を調整していた方は、ぜひタイムライン機能の使い方を覚えてみてください。
今回は以上になります。最後までご覧頂き、ありがとうございました。
