Share Posted July 28, 2020 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? Link to post Share on other sites
Author Share Posted July 28, 2020 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. 1 Link to post Share on other sites
Share Posted July 28, 2020 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 }); 5 Link to post Share on other sites
Share Posted July 28, 2020 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 }); 1 Link to post Share on other sites
Author Share Posted July 28, 2020 @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! 1 Link to post Share on other sites