アニメーション終了後のTweenMax

Question

その後、最初のアニメーションが実行されるとき、同じターゲット上に別のアニメーションが必要です。

var lnk = document.querySelector('#clickme'); 
var tl = new TimelineMax(); 

lnk.addEventListener('click', go, false); 

function go(){ 
    tl.to('.glasko', 1, {width: 500, height: 500}); 
}; 

その後、divの背景色を変更したいと思います。

tl.to('.glasko', 2, {backgroundColor: 'red'}); 

これはどのようなベストプラクティスですか？

Answer 1

GSAP &と簡単にTimelineMaxとなります。同じTimelineMaxインスタンスを使用して最初のアニメーションの後に2番目のアニメーションを書き込む必要があります。これが最善のアプローチです。

var lnk = document.querySelector('#clickme'); 
var tl = new TimelineMax(); 

lnk.addEventListener('click', go, false); 

function go(){ 
    tl.to('.glasko', 1, {width: 500, height: 500}); 
    tl.to('.glasko', 2, {backgroundColor: 'red'}); 
}; 

demo