Tweening two properties of same object with overlap

[Thomas James Thorstensson]

Hello Again

 

The following works nicely

 

var tl = new TimelineLite();


var $frame1 = document.getElementById('frame1');
var $txt1 = document.getElementById('txt1');
var $txt2 = document.getElementById('txt2');


tl.set($txt2, {opacity:0})


tl.add( TweenLite.to($frame1, 1, {alpha:1}) );
tl.add( TweenLite.to($frame1, 1, {backgroundColor:"#ff6a6a"}) );
tl.add( TweenLite.to($txt1,1,{scaleY:0, ease:Elastic.easeOut},2) );
tl.add( TweenLite.to($txt1,1,{alpha:0, ease:Elastic.easeOut}) );
tl.add( TweenLite.to($txt2, 1, {alpha:1}),"-=2" );


tl.play();

It works: my last timelinelite addition happens with intended overlap.

 

But what if I would like to have the alpha begin to fade out as I shrink the text of the same object. This won't work:

tl.add( TweenLite.to($txt1,1,{scaleY:0, ease:Elastic.easeOut},2) );
tl.add( TweenLite.to($txt1,1,{alpha:0, ease:Elastic.easeOut}, "-=2.5") );

I tried with a few different values just to make sure it is not the numbers. 

Is there a way I can do an overlap in tweening of the same object: should I perhaps default to the old skool delay method here and so not put it as a timelinelite parameter but "bake it in with the TweeLite.

 

Thanks again

 

.S, over coffe

 

 

 

[Thomas James Thorstensson]

Ehhhhhh. Ignore I got the seconds wrong on the last part. It does work!

 

My Bad!

 

Back to coffe

 

.S

[Oliver16Years]

I think You can write Your code in shorter format:

var tl = new TimelineLite();

tl.set(txt2, {opacity:0})

.to(frame1, 1, {alpha:1})
.to(frame1, 1, {backgroundColor:"#ff6a6a"})
.to(txt1, 1, {scaleY:0, ease:Elastic.easeOut}, 2)
.to(txt1, 1, {alpha:0, ease:Elastic.easeOut})
.to(txt2, 1, {alpha:1}),"-=2");

We don't need to use getElementByID(). The DOM elements with an ID somehow already have a reference in JS.