Jump to content
Search Community

Draggable for Canvas elements

ElliotGeno test
Moderator Tag

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

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

Link to comment
Share on other sites

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!

  • Like 2
Link to comment
Share on other sites

  • 1 year later...

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