Jump to content
Search Community

2nd tween on TimelineLite animation not firing

overbyte test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

  • Like 1
Link to comment
Share on other sites

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)
  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...