Jump to content
Search Community

Problem with Draggable plugin

f_lande test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

Hello forum,

quite new to GSAP (v. 3.9.0), and I'm testing its features, which I think are impressive, but not everything goes as advertised, it seems.

I'm trying to use the Draggable plugin. I properly registered it with:

 

gsap.registerPlugin(Draggable);

 

but when I try to use it like this, with a Pixi object, in its simplest mode:

 

Draggable.create(circle);

 

or more generally:
 

Draggable.create(circle,
{
  type: "y",
  inertia: true,
  bounds: document.getElementById("container"),
  onClick: function() { console.log("clicked"); },
  onDragEnd: function() { console.log("drag ended"); }
});

 

I get, in the browser's console:

 

TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
    at La (e:\home\francesco\elcenter\online\pixijs\31_draganddrop\webapp\js\draggable.min.js:10:7211)
    at _isFixed (e:\home\francesco\elcenter\online\pixijs\31_draganddrop\webapp\js\draggable.min.js:10:25971)
    at new Draggable (e:\home\francesco\elcenter\online\pixijs\31_draganddrop\webapp\js\draggable.min.js:10:26041)
    at e:\home\francesco\elcenter\online\pixijs\31_draganddrop\webapp\js\draggable.min.js:10:15344
    at Array.map (<anonymous>)
    at Function.create (e:\home\francesco\elcenter\online\pixijs\31_draganddrop\webapp\js\draggable.min.js:10:15321)
    at OnStartAppSuccess (e:\home\francesco\elcenter\online\pixijs\31_draganddrop\webapp\js\00_draganddrop.ts:53:15)
    at Array.onComplete (http://localhost:59412/ScriptResource.axd?d=uHixXwP4lzcUWXWxkI7LaJz9Ozj8qYZwCx3tVZ_gCkTAKYAR8ZSNgu62NL1Ac0ubfb07oFpxv-BB10fjKxCOtYiQJXzZCvIra84dvhPd3ljfRt0xlnbaYlKEncrE-WMjoRsyrZ9qGDRTQgcNBmbpG2aX1lP_MKcY293nj7bkdZhcrGlXUpSIcgOAW1xlKvEe0&t=363be08:6972:17)
    at http://localhost:59412/ScriptResource.axd?d=uHixXwP4lzcUWXWxkI7LaJz9Ozj8qYZwCx3tVZ_gCkTAKYAR8ZSNgu62NL1Ac0ubfb07oFpxv-BB10fjKxCOtYiQJXzZCvIra84dvhPd3ljfRt0xlnbaYlKEncrE-WMjoRsyrZ9qGDRTQgcNBmbpG2aX1lP_MKcY293nj7bkdZhcrGlXUpSIcgOAW1xlKvEe0&t=363be08:3484:23
    at Sys$Net$WebRequest$completed [as completed] (http://localhost:59412/ScriptResource.axd?d=uHixXwP4lzcUWXWxkI7LaJz9Ozj8qYZwCx3tVZ_gCkTAKYAR8ZSNgu62NL1Ac0ubfb07oFpxv-BB10fjKxCOtYiQJXzZCvIra84dvhPd3ljfRt0xlnbaYlKEncrE-WMjoRsyrZ9qGDRTQgcNBmbpG2aX1lP_MKcY293nj7bkdZhcrGlXUpSIcgOAW1xlKvEe0&t=363be08:6376:13)
 

and nothing else happens. Did anybody ever came across any issue like this?

 

Thanks & best regards,

 

f_lande

 

Link to comment
Share on other sites

Hi PointC,

thanks for your input. I understood that GSAP could animate anything you throw at it, but at least in this case this doesn't seem to be true.

I'll review the other replies and see if I can find a way to work around the problem.

 

Bye,

 

f_lande

Link to comment
Share on other sites

1 hour ago, f_lande said:

I understood that GSAP could animate anything you throw at it, but at least in this case this doesn't seem to be true.

GSAP can animate anything you throw at it, but you need to work with it in the proper way. It's impossible for GSAP to understand all the custom logic in every 3rd party library on the planet. For example...

let myObj = {
  _x: 0,
  x(value) {
    if (arguments.length) {
      this._x = value;
    }
    return this._x;
  },
  render() {
    // do stuff to render it to a <canvas> object...
  }
};

If you gsap.to(myObj, {x: 200}) it would indeed animate that value to 200 but you'd never see it render because there's custom logic in that case requiring that you call myObj.render()! See what I mean? PIXI is a 3rd party library like that. There's just no way GSAP could automatically read all the 3rd party code and understand that's what this particular custom thing requires. Is that a bug in GSAP? Nope. Does it mean GSAP can't animate it? Nope. You just need to understand the mechanics. 

 

If you still need some help, please provide a minimal demo and we'd be happy to answer any GSAP-specific questions. 👍

Link to comment
Share on other sites

Hi GreenSock,

no, I'm not sure to see what you mean, but it doesn't matter. I just wish I had a simple example showing how to drag an object defined within the CANVAS, not the DOM, and that pure GSAP can animate smoothly, without any problem (after proper project setting, which took me a while, but it's done now).

Tomorrow I'll try to create a CodePen demo, but I don't know if I'll succeed. Otherwise, I could send you a minimal project example, showing my point.

 

Thanks & best regards,

 

f_lande

Link to comment
Share on other sites

Glad to hear you got it done. 

 

Please keep in mind that <canvas> is just a blob of pixels to the browser. That's it. There aren't any "objects" that can be "draggable" from its perspective. You can't attach regular pointer/mouse/touch events to specific blobs of pixels in any native way - that's all handled by your 3rd party library. So GSAP can't magically add all that functionality for you. See what I mean? 

 

You could build your own <canvas> library that lets people create objects that you then draw() to the <canvas> (as blobs of pixels) with all kinds of magical methods and properties in whatever way you want to engineer it. GSAP couldn't somehow reverse-engineer everything and try to figure out all the magical methods you created, what you named them, which ones need to be called to make rendering happen, how to listen for the proper pointer events to sense when a user presses on a particular object in that blob of pixels, etc.

 

But yeah, if you still need some help, a simple CodePen would be perfect please.

  • Like 1
Link to comment
Share on other sites

  • Solution

Like a lot of GSAP plugins, Draggable is just for DOM objects. For Draggable to work with PixiJS, it would have to be a completely separate plugin, but there is no justification for that as Pixi already provides a way to drag Pixi objects.

 

https://pixijs.io/examples/#/interaction/dragging.js

 

However, you can use the InertiaPlugin to animate the release after dragging an object.

 

See the Pen WNZEQaz by GreenSock (@GreenSock) on CodePen

 

  • Like 4
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...