Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Skripted

GSAP Draggable + Kinetic Layer

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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/

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