GSAP リピート(繰り返し)メソッド repeat / repeatDelay / yoyo / yoyoEase

Webコーダー日記

TOP＞blog＞コーディング＞GSAP リピート(繰り返し)メソッド repeat / repeatDelay / yoyo / yoyoEase

GSAP リピート(繰り返し)メソッド repeat / repeatDelay / yoyo / yoyoEase

2023.03.08

コーディング

GSAP アニメーション

webコーダーのsaco @sacocco_sacoya です。

今日はGSAPの繰り返しメソッドについて学びました。
アニメーションの繰り返しを作成する際に使えるメソッドをご紹介していきます。

繰り返しアニメーション付きのboxで挙動確認

See the Pen GSAP 繰り返し repeat / repeadDelay / yoyo / yoyoEase by saco (@sunacodesu) on CodePen.

挙動確認ができるboxをcodepenに作成しました。

赤いboxの挙動内訳↓

1秒かけて360℃回転
開始時のeasingはsteps(5)
巻き戻しの際のeasingはback.out(2)
2回リピート
リピートとリピートの間は1秒数停止
yoyo機能あり

青いboxの挙動内訳↓

3秒掛けて背景色が灰色に変化
開始時のeasingはsteps(5)
巻き戻しの際のeasingはcirc.out
無限リピート
リピートとリピートの間は2秒数停止
yoyo機能あり

こんな感じで作成してみました。

ちなみにeasingとは、アニメーションの変化の挙動を指定できるGSAPの機能です。
easingって何？という方は、↓の記事で詳しく解説していますのでぜひ御覧ください。

GSAP easingの使い方 – アニメーションの変化を制御する –

webコーダーのsaco @sacocco_sacoya です。今回はGSAPのeasingについて勉強したことをまとめてみました。easin…

繰り返しアニメーションに使用するメソッド

挙動をざっと確認していただいたところで、繰り返しアニメーションに関するメソッドを御紹介します。
GSAPで使える繰り返しメソッドは主に4つです。

repeat
repeatDelay
yoyo
yoyoEase

それぞれ詳しく見ていきます。

repeat

引数に繰り返ししたい数値を指定します。
引数を「2」とすると、2回アニメーションが繰り返されます。
無限リピートを作成するときは「-1」を指定します。

repeatDelay

繰り返しの間に停止時間を指定したいとき、引数に秒数を指定します。
「1」とすると、1秒停止したあとにアニメーションが繰り返されます。

yoyo

引数をtrueにすると、再生と巻き戻しが繰り返されます。

yoyoEase

yoyoを指定したアニメーションが巻き戻しする際のeasingを指定することができます。
ちなみに、yoyoEase:trueとすると、何もeasingの指定がない場合はeasingの初期値であるpower1.outが適用されます。

記述方法は２種類

メソッドを繋げて記述
gsapのオブジェクトの中に記述


gsap.to('.box.red',1, {
  rotate: 360,
  ease:'steps(5)',
  yoyoEase: 'back.out(2)'
})
//↓↓↓↓　  １： メソッドを繋げて記述する例
.repeat(2).repeatDelay(1).yoyo(true)

gsap.to('.box.blue', 3, {
  backgroundColor: '#eee',
  ease:'steps(5)',
//↓↓↓↓　  2: メソッドをオブジェクトの中に記述する例
  yoyo:'true',
  yoyoEase: 'circ.out',
  repeat: -1,
  repeatDelay:2,
})