Something changed in Draggable v3 vs v2? [solved]

[Friebel 88 Likes (Contributor)]

For projects I was working with a pretty old version of Draggable (with Throwpropsplugin), so I decided to upgrade these to the latest v3 ones from the latest Club Greensock. I found out I had to rename ThrowPropsPlugin to IntertiaPlugin and so now I use inertia: true inside a rotating draggable config. But both morphing and draggable (rotation) are somehow not working as before.

 

What I'm experiencing now is that in whatever browser I use (Firefox / Chromium type browsers) the interaction (both mouse and touch) with the rotating draggable is not working right anymore, which was working fine in v2 with the old pluginversions; when rotating the disc it's rotating all over the place. Sometimes it suddenly reverses direction and even moves the other side in an instant.  

 

BTW I replaced the full gsap folder inside node_modules by the one from the Club Greensock zip (v3.1.1)

 

This is how I initialize:

import {

    gsap, CSSPlugin, Draggable, InertiaPlugin,

    Linear, Sine, Back,

} from 'gsap/all';

 

gsap.registerPlugin(CSSPlugin, Draggable, InertiaPlugin, MorphSVGPlugin);

gsap.defaults({ overwrite: 'auto' });

 

This is how I config the disc:

gsap.set(this.wheel, { transformOrigin: '50% 50%' });

Draggable.create(this.wheel, {

            type: 'rotation',

            inertia: true,

            dragResistance: 0.005,

            edgeResistance: 0.01,

        });

 

So it seems like the new plugins (of coarse I also switched to gsap v3 and its new syntax, using npm and webpack btw) for some reason need a different approuch, have different value-ranges or something like that. Reading through the migration page on Greensock I don't see anything so far about this and looking at the parameters of the new plugins on the Greensock website on v3, I don't see much difference either. The methods and parameters I use still seem to be the same.

 

Also things are wrong now with the locations of elements inside the svg. These elements are animating still, but seem to have a much smaller position-delta (scale) then before. I thought maybe this was about the transformOrigin, but it doesn't seem to be changed in v3. Weird.

 

BTW I'm working with SVG here and all other code and the graphics (svg) are not changed.

 

[edit] the draggable direction change (and suddenly moving in reverse direction) seems to be happening on a quart of the wheel only, the other 3 quarts seem to work as expected while dragging, but this quart moves in reverse. As if there is a problem with the angle-calculation there.

 

I thought replacing gsap and the plugins to the new v3 would be effortless and would almost be compatible in terms of API, but I seem to be missing something here. 

 

Before spending a lot of time in creating a smaller project with this, could anybody perhaps tell me if there is something I need to know according to the migration to v3 and Draggable and why this is not working as before? Are perhaps things changed like value-ranges?

[ZachSaucier 7,152 Likes (Superhero)]

Hey Friebel. Can you please create a minimal demo of the issue in a CodePen or something? It's really hard to troubleshoot blindly. 

 

Side notes: 

• CSSPlugin is baked into the core in GSAP 3 - no need to import it.
• You're trying to register MorphSVGPlugin but didn't import it. 
• We recommend importing the things listed above as:

  import { gsap, Linear, Back, Sine } from "gsap";
  import { Draggable } from "gsap/Draggable";
  import { InertiaPlugin } from "gsap/InertiaPlugin";
  
  gsap.registerPlugin(Draggable, InertiaPlugin);

   

[OSUblake 18,495 Likes (Superhero)]

6 hours ago, Friebel said:

BTW I replaced the full gsap folder inside node_modules by the one from the Club Greensock zip (v3.1.1)

 

Another side note. You don't need to do that anymore. 

npm install ./gsap-bonus.tgz

 

Check out this video at around 3:00

 

 

 

https://greensock.com/docs/v3/Installation

 

 

[OSUblake 18,495 Likes (Superhero)]

Something def seems wrong. cc @GreenSock

 

v2

See the Pen 5ed42e012c21c2ae1bb9f19149b76f59 by osublake (@osublake) on CodePen

 

 

v3

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

 

 

[GreenSock 18,587 Likes (Superhero)]

Yeah, sorry, that's actually something that has already been fixed in the upcoming release of Draggable which you can preview at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable3.min.js - when I dropped that into your demo, Blake, it seemed to work great. Do you guys see any other issues? 

 

And if you want to preview the upcoming GSAP, it's at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js

[GreenSock 18,587 Likes (Superhero)]

Also, just to be clear, that issue in Draggable was specific to <g> elements. 

[Friebel 88 Likes (Contributor)]

17 hours ago, ZachSaucier said:

• CSSPlugin is baked into the core in GSAP 3 - no need to import it.

Ah alright, that's great to know. So we don't need to import CSSPlugin anymore. And I see it's not even needed to register the CSSPlugin either anymore. Nice.

 

 

 

15 hours ago, OSUblake said:

Another side note. You don't need to do that anymore. 

npm install ./gsap-bonus.tgz

Check out this video at around 3:00

Thanks for this welcome tip. I saw that video, but when it started talking about working with a <script> tag I stopped watching it, thinking this is a video for people not using bundlers.

 

 

 

17 hours ago, ZachSaucier said:

• You're trying to register MorphSVGPlugin but didn't import it. 
• We recommend importing the things listed above as:

  
  import { gsap, Linear, Back, Sine } from "gsap";
  import { Draggable } from "gsap/Draggable";
  import { InertiaPlugin } from "gsap/InertiaPlugin";
  
  gsap.registerPlugin(Draggable, InertiaPlugin);

   

Yes, I know. I use MorphSVGPlugin elsewhere in the project and forgot to remove it from this code snippet.

BTW adding Draggable and InertiaPlugin to the gsap import line in code, so like import { gsap, Draggable, ...} from 'gsap/all'; also seem to work.

Question: Is there a special reason why you advise to import Draggable and InertiaPlugin on their own lines? Or are you just doing that for reading code purposes because you like it better that way?

Question: And is there in v3 a difference between importing from 'gsap' and importing from 'gsap/all' (in v2 the advise was to import from gsap/all, is that changed in version 3?). Or maybe I should watch the full video 😉.

 

 

15 hours ago, OSUblake said:

Something def seems wrong. cc @GreenSock

This problem is what I'm experiencing indeed. Thanks for this @OSUblake .

 

 

15 hours ago, GreenSock said:

Yeah, sorry, that's actually something that has already been fixed in the upcoming release of Draggable

 

14 hours ago, GreenSock said:

Also, just to be clear, that issue in Draggable was specific to <g> elements. 

The element I use Draggable on is indeed a <g> element. So it looks like that is the problem I'm facing now and I'm gonna look if it is fixed in the preview of version 3.2.0 you sent. 

 

 

 

Gonna try the 3.2.0 version today. I'll let you know if that fixes the issue. Thanks for all your quick responses so far.

[edit] @GreenSock Yes, replacing Draggable with the 3.2.0 preview fixes the issue! 

[OSUblake 18,495 Likes (Superhero)]

24 minutes ago, Friebel said:

Is there a special reason why you advise to import Draggable and InertiaPlugin on their own lines? Or are you just doing that for reading code purposes because you like it better that way?

 

It helps with support as that is the syntax used by install helper here. 

https://greensock.com/docs/v3/Installation?checked=core,draggable,inertia#modules

 

People seem to get confused by gsap/all. 

 

25 minutes ago, Friebel said:

Question: And is there in v3 a difference between importing from 'gsap' and importing from 'gsap/all' (in v2 the advise was to import from gsap/all, is that changed in version 3?). Or maybe I should watch the full video 😉.

 

The only difference is that when using gsap/all with TypeScript, the compiler might have trouble finding the definitions because it will search for a package with the name gsap/all. If that happens, you have just have to manually tell it where the definitions are in your tsconfig.

 

{
  "compilerOptions": {
    ...
  },
  "files": [
    "node_modules/gsap/types/index.d.ts"
  ]
}

 

... or do import { gsap } from "gsap" at least 1 time in your app. Just a weird little quirk.

 

 

[ZachSaucier 7,152 Likes (Superhero)]

5 hours ago, Friebel said:

I saw that video, but when it started talking about working with a <script> tag I stopped watching it, thinking this is a video for people not using bundlers.

There are two videos: one for people wanting to use a <script> tag and one for npm/modules.