2nd tween on TimelineLite animation not firing

[overbyte 1 Likes (Newbie)]

Hi guys

 

I'm using TimelineLite to animate an html5 banner and I'm having trouble with one of the lines:

 

here is my code:

panel.animate = function () {
	var _tweenTime = this._tweenTime,
		_staggerTime = this._staggerTime,
		_frameTime = this._frameTime,
		_carTime = 5;

	this._timeline
	// frame 1
		.to(expTxt0, _tweenTime, { alpha:0, ease:Power2.easeIn }, _frameTime)
		.to(expTxt1, _tweenTime, { alpha:1, ease:Power2.easeOut })
	// frame 2
		.to(expTxt1, _tweenTime, { alpha:0, ease:Power2.easeIn }, _frameTime)
		.staggerTo([
			expTxt2,
			expTxt3,
			expTxt4,
			expTxt5,
			expTxt6,
			expTxt7,
			expTxt8
			], _tweenTime, { alpha:1, ease:Power2.easeOut }, _staggerTime)
		.to(renaultLogo, _tweenTime, { alpha:1, ease:Power2.easeOut });
	// car animation
	this._timeline.add([
		new TweenLite(car, _tweenTime * 2, { alpha:1, ease:Power2.easeOut } ),
		new TweenLite(car, _carTime, { left:373, top:158, scaleX:1, scaleY:1, ease:Power2.easeOut } ),
		new TweenLite(wheel0, _carTime, { rotation:"720", ease:Power2.easeOut }),
		new TweenLite(wheel1, _carTime, { rotation:"720", ease:Power2.easeOut })
		], 0);
};

 

the line in question is the first line under the // frame 2 comment:

.to(expTxt1, _tweenTime, { alpha:0, ease:Power2.easeIn }, _frameTime)

In actionscript I would expect this to fade the expTxt1 <img> back down (after fading it up on the previous line). I've tried setting overwrite:false (not sure if that's a thing) and switching between using opacity and alpha but i can't think of anything else to do to make the code work.

 

Can anyone see if I'm missing something please?

 

Thanks

obie

[jamiejefferson 1,193 Likes (Superhero)]

There was an API change (detailed breakdown of the changes) in January for GSAP 1.8.0 that affects the way the timeline convenience methods work:

[ to(), from(), fromTo(), staggerTo(), staggerFrom(), and staggerFromTo() ]

 

The 4th parameter is the position which controls the placement of the tween in the timeline (by default, it's at the end of the timeline). Use a number to indicate an absolute time in terms of seconds (or frames for frames-based timelines), or you can use a string with a "+=" or "-=" prefix to offset the insertion point relative to the END of the timeline.

 

I'm guessing that _frameTime is a Number, so lines 175 and 177 are inserting the tween at the same time, when you were intending for the offset to append the tweens. The following change should restore the append functionality you were expecting:

    this._timeline
    // frame 1
        .to(expTxt0, _tweenTime, { alpha:0, ease:Power2.easeIn }, "+=" + _frameTime)
        .to(expTxt1, _tweenTime, { alpha:1, ease:Power2.easeOut })
    // frame 2
        .to(expTxt1, _tweenTime, { alpha:0, ease:Power2.easeIn }, "+=" + _frameTime)

[overbyte 1 Likes (Newbie)]

That worked a treat - thanks so much