Jump to content
Search Community

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

soupking test
Moderator Tag

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.

http://pixijs.io/pixi-filters/tools/demo/

https://github.com/pixijs/pixi-filters

 

 

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

  • 1 year later...

Hi,

 

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.

 

Thanks!

 

 

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.
×
×
  • Create New...