Gsap 3.8.0 PixiPlugin Bug?

[AsKadir 34 Likes (Newbie)]

Hi there,

Recently I tried to update GSAP from 3.6.0 to 3.8.0 and found issue with Pixi JS.

I have a Pixi animation with displacement filter and I also use PixiPlugin. After update it stopped to work and in console I have:
DisplacementFilter 'is not a DisplayObject or PIXI was not found. PixiPlugin.registerPIXI(PIXI);'
I use webpack and follow rules with GSAP PixiPlugin:

import * as PIXI from 'pixi.js';

import gsap from 'gsap';

import { PixiPlugin } from 'gsap/PixiPlugin';

import { Draggable } from 'gsap/Draggable';

 

gsap.registerPlugin(PixiPlugin, Draggable);

PixiPlugin.registerPIXI(PIXI);

I though it was Webpack or Pixi JS issue because I updated them too, but after a lot of tests I see that issue with GSAP.

You can check this codepen and see error in console.

 

Let me know am I right or not, thanks in advance!

See the Pen yLJZmxK by ChicagoJostik (@ChicagoJostik) on CodePen

[OSUblake 18,335 Likes (Superhero)]

The PixiPlugin works with DisplayObjects, which would be like a Sprite, Graphics, Container, or any other PIXI object that extends PIXI.DisplayObject. Filters do not extend DisplayObject.

http://pixijs.download/release/docs/PIXI.DisplayObject.html

 

For your animation, you will need to target the properties directly. 

gsap.to(displacementFilterCloud.scale, {
  x: 180,
  y: 180
})

 

[AsKadir 34 Likes (Newbie)]

@OSUblake, Thanks a lot!
You saved me again!