Jump to content


PixiPlugin - What Needs to be Instatiated/Decalred to use?

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Sorry for not posting a CodePen everybody. It's been literally years since I've been coding and am now trying to get back in the swing of things.


I'm trying to run a basic test using PixiPlugin, all JS scripts are getting pulled properly but I keep running into this error:


Uncaught TypeError: Cannot read property 'DisplayObject' of undefined
    at Object.init [as _onInitTween] (PixiPlugin.js:391)
    at TweenMax.p._initProps (TweenMax.js:7407)
    at TweenMax.p._init (TweenMax.js:7366)
    at TweenMax.p.render (TweenMax.js:257)
    at TimelineLite.p.render (TimelineLite.js:494)
    at Object.p.render (TweenMax.js:6881)
    at Object.Animation._updateRoot.TweenLite.render (TweenMax.js:7150)
    at Object.p.dispatchEvent (TweenMax.js:6291)
    at _tick (TweenMax.js:6343)


What actually needs to be defined? before writing tween scripts with this plugin? It's hard to tell from examples what is part of the demonstration and what the sample requires.


Thanks for any heads up with this. Would love to just do a basic photo brightness/contrast fade.



Link to comment
Share on other sites

Sounds like you're using the plugin to animate something that can't be rendered. A display object is something that can be added to the stage, like a sprite, graphics, or container.


See the Pen RQVBbP by osublake (@osublake) on CodePen



The main Pixi file includes only a handful of filters, but they have a bunch of other filters that can be downloaded separately.





Just to show you how you can add and animate animate additional filters.


See the Pen ddWjyb by osublake (@osublake) on CodePen







  • Like 5
Link to comment
Share on other sites

I'm just referencing a <div> containing an <img>. That's okay, right?

It sounds like the plugin is loading okay then. I must not be defining something properly on the stage is my guess.


I'll take another round at it in a vacuum. Maybe that will help clarify the break in the chain. Thanks!

Link to comment
Share on other sites

Ah! Glad I asked. Again, rusty. That's why I was having object type declare issues. 


Will check out the CSS filters, not sure how they perform yet with browsers, but they should eventually come around I would think.


Thanks Blake!

Link to comment
Share on other sites

The performance of filters used to be pretty bad, but browsers have since optimized most of their usage.


If you notice performance is an issue, try adding will-change to your CSS. I was messing with a complicated blurring filter yesterday, and adding that made it run much faster.


will-change: filter;


  • Like 3
Link to comment
Share on other sites

  • 1 year later...



I am posting here because I am facing a somewhat similar issue with the PixiPlugin.

I’m using webpack to import both TweenMax and the PixiPlugin:


import * as PIXI from 'pixi.js'
import { TweenMax as TM, TimelineMax, PixiPlugin, Power2, Power3 } from 'gsap/all'


PixiPlugin is well defined but, whenever I try to use it, I get this error:


Cannot read property 'DisplayObject' of undefined


This line seems to be the problem in my bundle:

if (!target instanceof _TweenLite_js__WEBPACK_IMPORTED_MODULE_0__["_gsScope"].PIXI.DisplayObject)


I should clarify that, unlike OP, I’m trying to animate a PIXI DisplayObject (in my case, a PIXI.Container()).


Import the umd version of the plugin doesn’t seem to help.

I’m guessing it might have something to do with webpack, but I can’t quite put my finger on it.





PS: I should note that I’m using GSAP 2.1.2 and Pixi 5.0.0-rc.2. Downgrading Pixi to Pixi 4 didn’t help.

Edited by ReedBE
Link to comment
Share on other sites

Hm, it's tough to troubleshoot blind but it sounds like the PIXI object isn't defined properly. I wonder if you've got a tree shaking issue that's causing it to dump PIXI? Actually, what's more likely is that you're using an ES6 version of PIXI that doesn't define a global PIXI object. 


I guess you could try defining it manually kinda like: 

import { _gsScope } from "gsap/all";
import * as PIXI from 'pixi.js'

_gsScope.PIXI = PIXI;


Does that work for you? 

Link to comment
Share on other sites

It does!


I’d completely disabled tree shaking in my tests, so it is indeed the lack of a global PIXI object that was the cause.

I hadn’t thought of modifying _gsScope before.


Thanks, Jack!

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.