Jump to content
Search Community

MISSING: Can't find Draggable flask example

blueblau 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

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. 

Link to comment
Share on other sites

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.

 

  • Like 5
Link to comment
Share on other sites

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? 

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