Can You Use GSAP Draggable with PIXI.Graphics?

Question

I am creating a circle with PIXI.Graphics and then trying to use Draggable to move the circle on the X axis. The error i get is:

Uncaught Cannot tween a null target.

I have set the graphics object's interactive property to true...

Is this because Draggable does not work with PIXI.Graphics or I have made another mistake?

Here is the code where i create the graphics object in a class extending PIXI.Graphics:

export default class BlueDot extends PIXI.Graphics {
constructor(x, y) {
    super()
    this._init()
    this.x = x
    this.y = y
    this.interactive = true;
    this.buttonMode = true;
    this.dragDot();


}
_init() {
    this.lineStyle(0)
    this.pivot.set(this.x, this.y)
    this.beginFill(0x55f, 1)
    this.drawCircle(this.x, this.y, 20)
    this.endFill()
    this.hitArea = new PIXI.Circle(this.x, this.y, 20)
}
dragDot() {
  Draggable.create(this, {
      type: 'x, y',
  })
}

Then i add an instance of this class in another class.

Answer 1

kristianzanev was right, Draggable only works with DOM objects. So can either wrap your Pixi object in a DOM object and drag that around or use a proxy object.

To use a proxy, you can create it like so:

var proxy = document.createElement("div");

var draggable = new Draggable(proxy, {
  trigger: canvas,
  bounds: canvas,
  cursor: "inherit",
  throwProps: true,
  onPress: pressAction,
  onDrag: moveAction,
  onThrowUpdate: moveAction
}).disable();

And then use the press, move, and throw update to update your Pixi object. Demo.

For more information, check out the GreenSock forum thread on the same topic.