MISSING: Can't find Draggable flask example

[blueblau 11 Likes (Newbie)]

Hi guys,

 

I once stumpled upon an example using GSAP Draggable. It was a vertical slider that, when interacting, filled a flask/bottle with liquid.

 

The slider knob had the slider value, and when you dragged it fast the knob would rotate, depending on velocity. 

 

I have searched and searched for this example, as I have thought about it a lot.

 

Can any one find it?

 

Much appreciated. 

[Carl 9,066 Likes (Superhero)]

hmm, this smells of something @chrisgannon would conjure. This comes close to your description but I think it misses the mark with the rotation:

See the Pen vjNNew by chrisgannon (@chrisgannon) on CodePen

 

I'd suggest cruising through his pens: https://codepen.io/chrisgannon/pens/public/ Hit next about 100 times. Even if you don't find it (if its not his), you'll be amazed at what you see.

 

[blueblau 11 Likes (Newbie)]

This was it @Carl! Exactly! Thanks a bunch. Thank you for your quick response, and great help.

 

And @chrisgannon, stop making me feel like a complete amateur!  

[blueblau 11 Likes (Newbie)]

1 hour ago, Carl said:

...but I think it misses the mark with the rotation

 

Hmmm... oddly enough, the effect is not present on my desktop computer, as I guess your on as well, but on my phone it is. Superb effect.

 

[Carl 9,066 Likes (Superhero)]

wow, glad to hear that is the right one.

Now I am noticing the little pointer wiggling based on velocity. very cool.

[blueblau 11 Likes (Newbie)]

5 minutes ago, Carl said:

wow, glad to hear that is the right one.

Now I am noticing the little pointer wiggling based on velocity. very cool.

 

I forked it and made some adjustments so it, on desktop, feels like how it's on my phone. I love that effect. So meaningful.

Credits @chrisgannon

See the Pen EeEoWZ?editors=0010 by Blueblau (@Blueblau) on CodePen

 

 

Do you know why this velocity calculation is different on the phone?