GSAP でアニメーションの競合を避ける

GSAP の vars には overwrite というプロパティがある。同じターゲットの同じプロパティのアニメーションがある場合、それをどのように上書きするかを指定できる。

• false (default): 上書きしない
• true: 競合するものはすべて killed される
• auto: コンフリクトするもののみ killed される

例えば、スクロールによって要素が出たり入ったりするときのフェードイン・アウトアニメーションなどで使う。このようなケースでは auto を指定しておくとよい。

gsap.to(element, {
  autoAlpha: 0,
  duration: 1.0,
  overwrite: 'auto',
})