TweenMax after animation finished

Question

When first animation will be done after that I want another animation on the same target.

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

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

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

After that I want to change background color of div.

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

What is best practice for this?

Answer 1

GSAP makes it easy & simple with TimelineMax. You just need to write second animation after first animation using same TimelineMax instance and this is the best approach.

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