Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
mmontoya

Tweening to Stager Properties on a per-instance basis

Recommended Posts

Hello Folks,

I have a specific case which I am not sure how to handle:

I have an array of PIXI Sprites that I would like to stagger to another set of X, Y coordinates. While they each have specific start coordinates assigned to them, their destination coordinates are defined by an offset from a target destination point. The effect that I want is for the sprites to tween in formation - think of a squadron of planes, or a vee of geese, flying together in formation.

What I need to accomplish this, then, would be not unlike the map function where I can iterate through an array of objects, setting their tween properties dynamically, without hard-coding the destination coordinates in tween config object.

Is there a built-in function within the stagger property, that would give me access to the current instance so I can access its destination coordinates? 

I was thinking I might be able to hack the stagger's function(index, target, list), but how can I set a tween within a function that is out of scope of the timeline's config object? 

Share this post


Link to post
Share on other sites

Nevermind... I basically answered my own question even as I wrote it. For others coming across this edge case, everything works as you might expect because, in the end, we are using plain javascript, so the solution was quite simple: I simply created my own custom stagger using the map function for an array of Sprites, setting up each tween by taking on the "<0.3" syntax at the end of each one!

You gotta love GSAP because it just works! I know I do! :-)

Here's a code snippet with my solution, in case anyone encounters this:


 

shipSprites.map((ship, index) => {
			scene.timeline.to(
				ship,
				{
					pixi: {
						positionX: shipsArray[index].destX,
						positionY: shipsArray[index].destY,
					},
					duration: 10,
					ease: 'power3.out',
				},
				'<0.3'
			);
		});

In my code, the "scene" constant is implemented as a class that contains a reference to a gsap timeline, so I can tack on animation, extending it as I go... the key, really, is the use of the '<0.3' position parameter to offset each animation from the previous one.

  • Like 1

Share this post


Link to post
Share on other sites
3 hours ago, mmontoya said:

Is there a built-in function within the stagger property, that would give me access to the current instance so I can access its destination coordinates? 

 

Just use a function based value. You don't need to use the pixiPlugin for x and y.

gsap.to(shipSprites, {
  x: i => shipsArray[i].destX,
  y: i => shipsArray[i].destY,
  duration: 10,
  stagger: 0.3
});

 

  • Like 5

Share this post


Link to post
Share on other sites

Also keep in mind that you can use relative values if the change is the same for each:

gsap.to(shipSprites, {
  x: '+=100',
  y: '+=200',
  duration: 10,
  stagger: 0.3
});

 

  • Like 1

Share this post


Link to post
Share on other sites

@OSUblake Thanks! That is very useful!  I  confess I wasn't aware that the index of the currently iterated element was available within the tween!

@ZachSaucier Another excellent tip! I had no idea the relative syntax was also available on properties! Thanks! That makes for very compact code!

Thank you both for making learning GSAP such an enjoyable experience - It's been a real pleasure learning GSAP! (In no small part due to the excellent community on here).

Now that I have discovered it, I don't know what I'd do without it!

  • Like 1

Share this post


Link to post
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.

×