Jump to content


.call and .delayedCall - Spritesheet Problems

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

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");
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?


Link to comment
Share on other sites

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!)

  • Like 1
Link to comment
Share on other sites

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

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.