mmontoya Posted July 28, 2020 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 comment Share on other sites More sharing options...
mmontoya Posted July 28, 2020 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 comment Share on other sites More sharing options...
OSUblake Posted July 28, 2020 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 comment Share on other sites More sharing options...
ZachSaucier Posted July 28, 2020 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 comment Share on other sites More sharing options...
mmontoya Posted July 28, 2020 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 comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now