MENU

【GSAP】Timelineの途中に関数を仕込む

GSAPでタイムラインアニメーションの途中で関数を実行したい場合。

どんぴしゃなメソッドが.call()です。引数を渡したり実行するタイミングを.from()や.to()とかと同じように指定出来ます。

もくじ

Timeline.call()

Timeline.call()

.call( callback: Function, params: Array, position: * ) : self

https://greensock.com/docs/v3/GSAP/Timeline/call()

パラメータ

callback: Function

実行したい関数

params: Array

規定値: null

引数

position: *

規定値: “+=0”

実行するタイミングを指定。
“<+=1″や”myLabel+=30%”など、GSAPのポジションパラメータ

.call()の記述例

.targetAを45度回転、.targetBをフェードイン、.targetBがフェードイン開始して0.5秒後に関数を実行

const tl = gsap.timeline();

tl
  .from(
    '.targetA',
    {
      rotation: -45
    }
  )
  .from(
    '.targetB',
    {
      autoAlpha: 0
    }
  )
  .call(funcName, ['hoge', true], '<+=.5');

空のトゥイーンを使う方法

空のトゥイーンのonCompleteに指定する方法もあります。(空のオブジェクト{}を指定するのがミソ)
call知るまでこの方法でやっていました。
ただ、call()の方が引数も指定出来るので特別な理由が無い限りはcall()で良さそうです。

tl.to({}, {
  duration: 2,
  onComplete: funcName
}, '<');
よかったらシェアしてください!
もくじ
閉じる