PIXI Container + GSAP

[murshidazher 0 Likes (Newbie)]

Hi, I am new to GSAP. Hence I need to know how to integrate GSAP to PIXI.Container. Basically, I need to move the container out of focus by -GAME_WIDTH

Like,

TweenMax.to(container.position, 1, {x:-GAME_WIDTH});

Thank you.

[PointC 11,423 Likes (Superhero)]

Here's a basic PIXI container move that should get you started.

 

See the Pen yKwGZQ by PointC (@PointC) on CodePen

Happy tweening.

 

[GreenSock 12,851 Likes (Superhero)]

Also note that there's a PixiPlugin that's built specifically to make Pixi.JS animations easier: 

https://greensock.com/docs/Plugins/PixiPlugin

 

Happy tweening!

[OSUblake 13,949 Likes (Superhero)]

x and y are properties on a container, so you really don't have to use position.

TweenMax.to(container, 1, { x:400 } );

 

Another Pixi tip, you can chain graphics commands.

var graphics = new PIXI.Graphics()
  .lineStyle(0)
  .beginFill(0xffffff, 1)
  .drawRect(0, 95, 800, 10)
  .beginFill(0x7FFF00)
  .drawCircle(400, 100,50)

 

[PointC 11,423 Likes (Superhero)]

2 minutes ago, OSUblake said:

Another Pixi tip, you can chain graphics commands.

 

Thanks.  I didn't know that. I've mostly been adding sprites etc... so I've barely touched the graphics commands.