Jump to content

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

GSAP Draggable + Kinetic Layer

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

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




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.