gsapのTimelineのadd()とaddLabel()の設定方法

2021年8月25日gsap

See the Pen
by Sosak (@Sosak2021)
on CodePen.

gsapのTimelineのadd()とaddLabel()の設定方法を紹介します。
add()メソッドまで使えるようになると、上記のようなアニメーションが可能になります。

gsapのTimelineのadd()とaddLabel()の設定方法

See the Pen
gsap timeline addLabel by Sosak (@Sosak2021)
on CodePen.

// addLabel
const TL = gsap.timeline({
  defaults: {
    duration: 2,
    ease: 'bounce.out'
  },
  repeat:2,
  yoyo: true,
  paused: true,
});
TL
.from('.img1', {autoAlpha: 0, y: -50, duration: 1})
.from('.img2', {autoAlpha: 0, y: -50, duration: 1}, 1) //2秒後にスタート
.from('.img3', {autoAlpha: 0, y: -50, duration: 1}, '<') //上と同じタイミングでスタート
.addLabel('endImageAnimation')
.from('h1', {autoAlpha: 0, y: -50, ease: 'power2.out'})
.from('p', {autoAlpha: 0, y: -50, ease: 'power4.in'}, '-=0.9')

setTimeout(() => {
  // TL.restart()
  TL.seek('endImageAnimation') //addLabelで作成した名前を指定
  TL.play()
}, 500)

上のように、from()メソッドの間でaddLabel()メソッドを差し込んで、そこに名前をつけることができます。
そして、seek()メソッドでその名前を指定することができます。
そうすることで、その名前のところからアニメーションをスタートさせることができます。

add()メソッド

add()メソッドは、.add( value:*, position:*, align:String, stagger:Number ) : *ということで、staggarなんかも設定することができます。コールバック関数もとることができます。

See the Pen
gsap timeline add by Sosak (@Sosak2021)
on CodePen.

// add
const TL = gsap.timeline({
  defaults: {
    duration: 2,
    ease: 'bounce.out'
  },
  // repeat: -1,
  repeat:2,
  yoyo: true,
  paused: true,
  // onStart: () => console.log('start')
});
TL
.from('.img1', {autoAlpha: 0, y: -50, duration: 1})
.from('.img2', {autoAlpha: 0, y: -50, duration: 1}, 1) //2秒後にスタート
.from('.img3', {autoAlpha: 0, y: -50, duration: 1}, '<') //上と同じタイミングでスタート
.add('endImageAnimation', '-=0.5') //0.5s前から指定
// .add(() => {
//   console.log('コールバック関数');
// })
.from('h1', {autoAlpha: 0, y: -50, ease: 'power2.out'})
.from('p', {autoAlpha: 0, y: -50, ease: 'power4.in'}, '-=0.9')

setTimeout(() => {
  // TL.restart()
  TL.seek('endImageAnimation') //addLabelで作成した名前を指定
  TL.play()
}, 500)

addLabel()メソッドと同じようにも使えますし、コールバック関数なども設定できます。