Strange behaviour with fromTo in TimelineMax

Question

Using TimelineMax for a new project, I am facing a strange behaviour.

var tl = new TimelineMax({ paused: true });
tl.add('step0')
  .fromTo('#colorize', 2, { color: '#ff0000' }, { color: '#00ff00' }, 'step0')
  .to('#colorize', 0.5, { color: '#f0f0f0' }, '-=0.5')
  .add('step1');

setTimeout(function() { tl.tweenFromTo('step0', 'step1'); }, 1000);
setTimeout(function() { tl.tweenFromTo('step0', 'step1'); }, 4000);

I made this little fiddle to explain: http://jsfiddle.net/avOff/xorkh2rj/

The text should be red at first (initialized in fromTo), then tween to green and finally to gray with an overlap of 0.5 seconds.

It works the first time I play the animation. But if I try to play it a second time (I used a setTimeout to simulate) with tweenFromTo function, the from state of my object is not honoured, it does not initialise to red before going green and gray.

If I remove the to block of my timeline it works as expected. Did I miss something?

Thanks for your help.

Answer 1

Found a solution for you, overwrite is the magic :)

Take a look at the snippet below:

var tl = new TimelineMax({ paused: true });
tl.add('step0')
  .fromTo('#colorize', 2, { color: '#ff0000' }, { color: '#00ff00', overwrite: 0 }, 'step0')
  .to('#colorize', 0.5, { color: '#f0f0f0', overwrite: 0 }, '-=0.5')
  .add('step1');

TweenMax.delayedCall(1, function () { tl.tweenFromTo('step0', 'step1'); });
TweenMax.delayedCall(4, function () { tl.tweenFromTo('step0', 'step1'); });

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>
<p id="colorize">Test color paragraph</p>

From the documentation:

overwrite : String (or integer) - Controls how (and if) other tweens of the same target are overwritten. There are several modes to choose from, but "auto" is the default ...

Read more about it on the here.

Update:

Having said that though, if I was tweening color values, I would not want to overlap tweens onto one another (i.e. your '-=0.5' position parameter is basically responsible for overlapping its .to() tween to the previous .fromTo() tween) and I would just let them animate one after another.

Here is an example snippet of that:

var element = document.getElementById('colorize');
var tl = new TimelineMax({ paused: true });
tl.set('#colorize', { backgroundColor: '#cc0' });
tl.to(element, 2, { backgroundColor: '#0cc' });
tl.to(element, 0.5, { backgroundColor: '#ccc' });
TweenMax.delayedCall(1, function () { tl.tweenFromTo(0, tl.totalDuration()); });
TweenMax.delayedCall(4, function () { tl.tweenFromTo(0, tl.totalDuration()); });

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>
<p id="colorize">Test color paragraph</p>