GSAP Draggable + Kinetic Layer

[Skripted 0 Likes (Newbie)]

Hey guys!

 

I'm trying to make my Kinetic Layer draggable with the draggable plugin but I'm not quite sure if I'm doing it right.

Maybe you guys can help me out a little. This is what I have so far:

viewPort = new Kinetic.Stage({
    container: 'container',
    width: window.innerWidth,
    height: window.innerHeight
});

mapLayer = new Kinetic.Layer();

Draggable.create(mapLayer, {type:"x,y", edgeResistance:0.65, throwProps:true});

mapLayer.add(...); // adding map tiles to the layer
viewPort.add(mapLayer);

but I'm always getting: "Uncaught TypeError: Cannot set property 'onselectstart' of null --- Draggable.min.js:14".

I have a feeling that I'm doing something terribly wrong here ...

 

greetings

Skripted

[GreenSock 8,117 Likes (Superhero)]

Sorry, Skripted - Draggable is for DOM elements (like a <div>). It looks like you're trying to use it with a proprietary Kinetic object. 

[Skripted 0 Likes (Newbie)]

So there lies the problem I was looking for a solution to integrate the inertia effect from the draggable demo into my kinetic app but it seems I have to code it on my own.

 

Anyway thank you!

[GreenSock 8,117 Likes (Superhero)]

Oh, you absolutely can - ThrowPropsPlugin is the thing that does all the magic under the hood in terms of inertia, smoothly handling redirection to different spots, imposing bounds elegantly, etc. Draggable is just a nice shell around that for handling the actual dragging. ThrowPropsPlugin can affect ANY numeric property of ANY object. Draggable is only for DOM elements. 

 

In fact, ThrowPropsPlugin can even handle tracking the velocity of any property of any object and then automatically plug that into the tween for you. Like:

ThrowPropsPlugin.track(yourObject, "x,y"); //track the velocity of yourObject.x and yourObject.y

//then, when you want to tween...
ThrowPropsPlugin.to(yourObject, {throwProps:{x:{max:500, min:0}, y:{max:300, min:0}}, ease:Power3.easeOut});

You'd obviously need to handle the actual dragging part in Kinetic, but then when the mouse/touch is released, you call that ThrowPropsPlugin.to(...) and it'll do all the magic, ensuring that it matches the velocity perfectly and glides to a stop, respecting any bounds you set (max and min).

 

There are a lot of features packed into ThrowPropsPlugin - I just touched on the basics here. I think you'll really like it once you understand how it works. Disclaimer: ThrowPropsPlugin is a membership benefit of Club GreenSock. http://www.greensock.com/club/