Tweening to Stager Properties on a per-instance basis

[mmontoya 16 Likes (Newbie)]

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? 

[mmontoya 16 Likes (Newbie)]

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.

[OSUblake 14,118 Likes (Superhero)]

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
});

 

[ZachSaucier 6,797 Likes (Superhero)]

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
});

 

[mmontoya 16 Likes (Newbie)]

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