Search code examples
javascriptgsap

How to change my second Greensock animation in timeline to start 1 second earlier

How to change my second Greensock animation in timeline to start 1 second earlier, like fill to start 1 second before drawing lines finished.

This is my code:

TweenLite.set(".blue-line, .yellow-line", {visibility:"visible"});

var tl = new 
TimelineMax();
tl.from(".blue-line, .yellow-line", 3, {drawSVG:0, ease:Power1.easeInOut})
.to(".blue-fill, .yellow-fill", 1, {css:{opacity:1}, ease:Linear.easeIn});

TweenLite.render();
Solution 
  • var tl = new TimelineMax();
tl.from(".blue-line, .yellow-line", 3, {drawSVG:0, ease:Power1.easeInOut})
tl.to(".blue-fill, .yellow-fill", 1, {css:{opacity:1}, ease:Linear.easeIn} , "-=1");

    Adding "-=1" to the end of your 'to' method then the stagger will work.

    https://greensock.com/docs/TimelineMax