Jump to content
Search Community

Tweens using .set() and .to() - not resetting after first play

Mr Pablo 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

I have a set of tweens (created using a .set() and several .to() methods) that is then added to a Timeline.

 

The animation plays, but on the 2nd play (Timeline set to repeat indefinitely) some of the assets are staying on screen, despite the .set() command settings their initial opacity as zero.

 

Do I need to tell the tweens to reset, or should the timeline be doing it automatically?

 

It seems to work flawlessly on most animations I have made, but this one, which has the most tweens yet (~10 assets with ~20 tweens in total) seems to be going crazy.

 

One assets which animates perfectly first time, stays still in its final position for every subsequent play through.

 

Zip file here

Link to comment
Share on other sites

I spent some time just trying to get your file to open and render without any luck.

Seems multiple connections to your server are failing or timing-out along the way.

 

Please spend some time and try to produce a reduced test case so that we can easily and clearly see the issue. We shouldn't have to edit your files, move assets around or do any debugging just to get your files to open.

 

If the issue is purely relate to a set() or to() not working the second time a timeline plays, just code a basic timeline that includes tweens/sets similar to what your dynamic data-parsing loop is creating, the simpler the better.

 

Unfortunately it will take way too long to decipher everything that is happening in your files as you have currently provided them. 

 

Using a site like codepen makes it much easier for us to assess your code and provide solutions. Furthermore, the process of creating the simplified version on codepen very often reveals the issue.

 

Feel free to fork this basic example: http://codepen.io/GreenSock/pen/woLpq to get started.

  • Like 1
Link to comment
Share on other sites

I started to strip out stuff in code pen and noticed that the erroneous assets are mainly ones that tween their opacity from 0 to 1 and then back to 0.

That's 3 states. Opacity 0 is set using .set() and the transition to opacity 1 then 0 is done with 2 .to() methods.

On the initial play, the set method seems to work fine, making the assets "invisible". And then to 2 tweena to change the opacity again work fine.

However it looks like the set method is not being called again correctly. It only seems to affect assets with 3 or more tweens.

I am going to look over the tween and timeline logic when i get into the office today but isn't it odd that just because I'm tweening the asset back to 0 opacity, it fails to be reset on loop?

I'm fairly sure my tween and timeline logic is correct so its got my scratching my head loads!

 

EDIT - Made a reduced test case in codepen 

See the Pen tgfcj by anon (@anon) on CodePen

 

As you can see, the tweens start off ok, but when the timeline ends and should repeat, it breaks, without errors. If you remove the second .to() method, it will repeat non stop, like I expect it to.

Link to comment
Share on other sites

Hi Paul,

 

One of the first things that come out is this:

var tn;
	tn = TweenMax.set( $("#logo"), {
		backgroundImage: "url(http://s.cdpn.io/16327/logo_black.jpg)",
		height: "60px",
		opacity: 0,
		width: "60px",
		x: 10,
		y: 10,
		transformOrigin: "left center"
	});
	
	tn = TweenMax.to($("#logo"), 4, { delay: 0, opacity: 1});
	tn = TweenMax.to($("#logo"), 2, { delay: 4, opacity: 0});

Basically here you're changing what tn is, first is the set instance, then one to instance and finally another to instance, is pretty much like this:

var a = 1;

a = 2;
a = 3;

console.log(a);//returns 3

What you should do is create the set instance and two different to instances. Then you add the to instances to the timeline, like this:

TweenLite.set(
  $("#logo"), {
		backgroundImage: "url(http://s.cdpn.io/16327/logo_black.jpg)",
		height: "60px",
		opacity: 0,
		width: "60px",
		x: 10,
		y: 10,
		transformOrigin: "left center"
});

var tn2 = TweenMax.to($("#logo"), 4, { opacity: 1}),
    tn3 = TweenMax.to($("#logo"), 2, { opacity: 0}),
    masterTimeline = new TimelineMax({paused: true, repeat: -1});
  
masterTimeline.add([tn2,tn3], 0, "sequence");
	
window.onload = function()
{
  masterTimeline.play();
};

Give that code a try and let us know if it's working as expected, otherwise fork it and modify it to your scenario.

 

Rodrigo.

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...