GSAP+PIXI Image Matrix

[neworigin]

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

[Carl]

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

[Carl]

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

[neworigin]

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

 

[Carl]

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.

 

[neworigin]

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