Open1
gsapのtimlineでのアニメーション管理
のっくんgsapでアニメーション組む時の課題点
- 複雑なアニメーションや、アニメーションをする要素またはそのプロパティの数だけコード長くなる。→見にくい。
- gsap単体ならまだしも、複数要素のタイミングを調整しつつtimeline組む場合は、ネストも深くなるのでもっと見にくくなる。
- gsapのプロパティ(vars引数)はアニメーションの調整さえしてしまえば、ソースコード内での優先度？は低いので、どっか目立たないところに置いておきたい。
▼例
// カラーと位置を異なるタイミング,速度,イージングで見せたい。
gsap.to('[data-target="01"]', {
color: "rgba(255,0,0,1)",
duration: 0.5,
ease: 'power1.out'
});
gsap.to('[data-target="01"]', {
y: 300,
duration: 0.2,
ease: 'power1.in'
});
gsap.to('[data-target="01"]', {
x: 300,
duration: 0.1,
delay: 4,
ease: 'power1.in'
});
// さらに複数要素をtimeline上の任意のタイミングで実施したい場合。
const tl = gsap.timeline()
tl.to('[data-target="01"]', {
color: "rgba(255,0,0,1)",
duration: 0.5,
ease: 'power1.out'
}, "<")
.to('[data-target="01"]', {
y: 300,
duration: 0.5,
ease: 'power1.in'
}, "<")
.to('[data-target="01"]', {
x: 300,
duration: 0.5,
ease: 'power1.in'
}, "<4")
.to('[data-target="02"]', {
x: 300,
duration: 0.5,
ease: 'power1.in'
}, "+=0.1")
.
.
.
.
});
対応策
- 単一要素にアニメーションを付加する関数を作成（返り値はgsap, timelineもしくはgsapの配列）
- 関数の中で複数要素に対してアニメーションを付与しない。各要素のアニメーションの開始タイミングの記述位置が後述するtimline上で確認できないため。
- timeline.add()に↑で作成した関数を渡してあげる。
- アニメーションの開始タイミングはtimeline上で全て把握できるようにする。
// アニメーション単位でgsapを返す
// 関数の中で子要素を指定したりしない。
// ↑timeline上で全てのアニメーションの開始タイミングが見れるようにするため。
const aimationIn01 =(element) => {
const anims = [
gsap.to(element, {
color: "rgba(255,0,0,1)",
duration: 0.5,
ease: 'power1.out'
});
gsap.to(element, {
y: 300,
duration: 0.2,
ease: 'power1.in'
});
gsap.to(element, {
x: 300,
duration: 0.1,
delay: 4,
ease: 'power1.in'
});
]
return anims
}
const target01 = document.queryselector('[data-target="01"]')
const target02 = document.queryselector('[data-target="02"]')
const target03 = document.queryselector('[data-target="03"]')
const target04 = document.queryselector('[data-target="04"]')
// timeline上でのアニメーションの開始タイミングは第二引数（position）で調整
const tl = gsap.timeline()
timeline.add( aimationIn01( target01 ), 'start') // 随時ラベル追加
timeline.add( aimationIn01( target02 ), 'start+=4')
timeline.add( [aimationIn01( target03 ), aimationIn01( target03 )], 'start+=4') //複数のアニメーションの開始タイミングが同じであれば配列で渡す
※記述例なのでちゃんと動くかは不明。
参考