Draggable for Canvas elements

[ElliotGeno 27 Likes (Newbie)]

So I started creating my own tumbler effect using canvas. I have the rendering down perfect, but I needed to add the interactivity.

 

Essentially I draw an SVG of numbers into a canvas element to use as a sprite sheet. I then blit the numerals onto the display depending on where I need them. Works very fast!

 

I then started writing my own events for touch dragging and throwing but kind of got stuck coming up with snapping to a specific target point. I then remembered Greensock had a plugin for such a thing!

 

But the problem is that it is based on physical elements... not applying the effect to a generic object.

 

I wonder if there is someway to hack Draggable to make use of it for things other than elements. Basically just use it to tween a value instead?

 

The only way I can think of is by creating some transparent div to throw. Or perhaps there is a better way to just find out how to calculate and adjust the target based on the velocity of the object.

See the Pen YGXPgK?editors=0100 by pyrografix (@pyrografix) on CodePen

[ElliotGeno 27 Likes (Newbie)]

Actually, it looks like the key nugget I was looking for is Throwable! I had no idea it existed!

http://greensock.com/docs/#/HTML5/Plugins/ThrowPropsPlugin/

 

Looks like I will need to catch up on this before moving forward!

[GreenSock 8,117 Likes (Superhero)]

Oh yeah, ThrowPropsPlugin is invaluable in cases like what you described. And it totally works with pretty much anything - it’s not tied to DOM or anything like that. You just feed in an initial velocity and an end value (or range, or function, or array for snapping) and it’ll smoothly glide to a stop where it’s supposed to. 

 

And yeah, it’ll even track the velocity of any numeric property of any object. Yep. So you don’t even have to worry about doing that yourself. I think you’re gonna love it once you grasp what it can do

 

Have fun!

[hakan 0 Likes (Newbie)]

how can we automatically count ,? :)

[ElliotGeno 27 Likes (Newbie)]

I suppose you could animate a value and use setValue onUpdate.