.call and .delayedCall - Spritesheet Problems

[BCI]

Fiddle is here: http://jsfiddle.net/nicktest2222/sV5Ug/74/

 

So I'm preparing to build my timeline. I have a buildAnimation function that creates my sprite-sheet animations. If there is a better to way to go about doing this, please share some knowledge with a noob. I want to create my sprite-sheet animations up front and call them at certain points in my timeline. I don't need to build them on the fly. Any help would be GREATLY appreciated.

 

I was expecting to use: Didn't work.

tl.call(buildAnimation, ["title", 628, 510, 10, 4, 0.11])

So I played around with this: Which kinda worked until...

tl.add( TweenLite.delayedCall(-1, buildAnimation,  ["title", 628, 510, 10, 4, 0.11]))

Until I added this after it, which caused the sprite-sheet not to work (or force itself to last frame)

tl.add( TweenLite.delayedCall(-1, buildAnimation,  ["title", 628, 510, 10, 4, 0.11]));
  .to("#title", 0.5, {left:-1000}, "+=1.5");

[jamiejefferson]

I think you'll get a good result by creating a separate timeline for the animation and adding it into the main timeline like this http://jsfiddle.net/sV5Ug/75/

tl.add(buildAnimation("title", 628, 510, 10, 4, 0.11))
  .to("#title", 0.5, {left:-1000}, "+=1.5");

var buildAnimation = function(label, width, height, rows, cols, speed) {
  var animation = new TimelineLite();
  ...
  return animation;
}

Alternatively, you could just run the function without any delayed calls and have it add your animation immediately http://jsfiddle.net/sV5Ug/76/

buildAnimation("title", 628, 510, 10, 4, 0.11);
tl.to("#title", 0.5, {left:-1000}, "+=1.5");

The reason it didn't "work" with the tween after it, is that all of your buildAnimation stuff is appended after the #title tween, so it all happens off screen.

[BCI]

Pretty awesome stuff, jamie... Thanks for your help. I owe you a beer.

 

How do I access a Timeline created in that way? Can you please check out this fiddle and click the girl once she appears?

http://jsfiddle.net/nicktest2222/sV5Ug/77/

[jamiejefferson]

In this case you've added an infinite (repeat:-1) tween and are trying to add more tweens after it with automatic positioning. Your tween is getting added and works correctly, but it's just so far into the future you'll never see it (more explanation here). Try removing the repeat:-1 and you'll see it working as you intend.

 

You might be better off starting a separate timeline for the girl, or just creating a standalone tween to move her away. There's some more advice on dealing with infinite tweens in the thread I linked.

 

(P.S. your animations are pretty neat!)

[BCI]

Thanks for your help Jamie. I used the separate timeline and it worked great!