neworigin Posted June 13 Share Posted June 13 Hi there, I'm new to PixiJS and trying to understand if GSAP can control the individual sprite elements independently. In the Codepen example I'm building a simple image matrix where I'd like to have the individual images transition in sequence with a slight delay in between. Currently the GSAP transition happens all at once. Wondering if I can leverage GSAP's stagger functionality or if that would even work with PIXI in this scenario? See the Pen WNBXzLW by neworigin (@neworigin) on CodePen Link to comment Share on other sites More sharing options...
Carl Posted June 13 Share Posted June 13 Thanks for the demo. very cool. The reason your images were animating all at once is because you are creating new tweens at virtually the same during each iteration of the loop. what I did was create a timeline outside the loop and then each images tween gets added to the timeline at a position of (imgNum * 1) See the Pen vYwWjev?editors=1010 by snorkltv (@snorkltv) on CodePen EDIT: at one point I had the wrong pen here 1 Link to comment Share on other sites More sharing options...
Carl Posted June 13 Share Posted June 13 perhaps an "easier" approach would be to push each sprite into an array and then after the loop runs you can tween every image in that array using a stagger See the Pen xxNPjPY?editors=0010 by snorkltv (@snorkltv) on CodePen 2 Link to comment Share on other sites More sharing options...
neworigin Posted June 13 Author Share Posted June 13 Carl, thanks so much for your reply--really helped! I dug more into the stagger to create some nice effects. One thing that's still unclear is how you stagger multiple properties independently. For example, I have the elements fading in but the colorizing also happens immediately. Possible to sequence so they fade in and then transition to color? Also not sure if it is a GSAP or PIXI issue, but when I set the initial scale to 0.5 and have GSAP scale up to 1.0 the elements get too large. Here is my updated pen: See the Pen qBGVYPY by neworigin (@neworigin) on CodePen 1 Link to comment Share on other sites More sharing options...
Solution Carl Posted June 14 Solution Share Posted June 14 it appears that the scale is set relative to the native size of the images not the width and height that you set in pixi. I haven't used pixi in years so I'm just going off what I see. When loading the images the first image is loaded at 300 x 300 but the rest are 150 by 150 and and it seems to work. If you want to stagger different properties at different rates you need a tween for each property. in the demo below I created a timeline. See the Pen qBGVyYR?editors=0010 by snorkltv (@snorkltv) on CodePen Hope this helps. if you're not familiar with timelines I'd strongly recommend my free beginner's course available via the link in my signature. 1 Link to comment Share on other sites More sharing options...
neworigin Posted June 14 Author Share Posted June 14 Perfect! Yes, arrived at the same conclusion with the PIXI image scaling issue. I figured timelines were going to be the way so thanks for the example! See the Pen NWVwBeJ by neworigin (@neworigin) on CodePen 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