Jump to content
Search Community

Draggable Path Progress

Romanus test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

  • Solution

You can log this in the function to get all the values or the draggable instance. See the Draggable docs for more info, onDrag:

 

Function - A function that should be called every time the mouse (or touch) moves during the drag. Inside that function, this refers to the Draggable instance (unless you specifically set the scope using callbackScope), making it easy to access the target element (this.target) or the boundary coordinates (this.maxX, this.minX, this.maxY, and this.minY). By default, the pointerEvent (last mouse or touch event related to the Draggable) will be passed as the only parameter to the callback so that you can, for example, access its pageX, pageY, target, currentTarget, etc. This is only called once per requestAnimationFrame.

 

See the Pen OJoBNMa?editors=1111 by mvaneijgen (@mvaneijgen) on CodePen

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

Thanks for the demo. I had some similar code laying around that made for an easy upgrade

 

See the Pen PodyzXb by snorkltv (@snorkltv) on CodePen

 

once you undestand all the draggable values @mvaneijgen referred to you can do quite a bit with them.

The normalize() utility function makes it easy to get the percent from the minY, maxY, and current y values

https://greensock.com/docs/v3/GSAP/UtilityMethods/normalize()

 

ISSUE

I hit a weird snag with your original demo in that it seems draggable is reporting unexpected minY and maxY values.

It appears the position and margin css setting you were using were causing them to be set to minY:1 and maxY:251.

@GreenSock please look

 

See the Pen wvEYzgy?editors=0111 by snorkltv (@snorkltv) on CodePen

 

EDIT: it seems to get the weird values you have to view the pen in its own larger window. very strange

 

EDIT 2: works fine in firefox. issue seen in Chrome and Safari

  • Like 3
Link to comment
Share on other sites

By "weird values", do you mean 1px different? I'm pretty sure that simply has to do with your browser height being an odd value rather than an even value. For example, if your window is 801px tall, but your element is centered, that lands on a half-pixel (400.5) and it rounds to the closest pixel. See what I mean? If it's 800px (or any number divisible by 2), half would land on a whole pixel. 

 

Your progress should be: 

// bad
gsap.utils.normalize(0, this.maxY, this.y);

// good
gsap.utils.normalize(this.minY, this.maxY, this.y);

Does that clear things up or is there something "weird" that I missed? 

Link to comment
Share on other sites

Thanks for looking and for the explanation.

9 minutes ago, GreenSock said:

By "weird values", do you mean 1px different?

yup. the circle is inside the scrollbar element. the scrollbar element is being centered, but I expected that the circle would always have a native / starting y of 0 relative to its position inside its parent. I guess I haven't seen the size of the window impact transforms of child elements like this before. 

 

Link to comment
Share on other sites

29 minutes ago, Carl said:

yup. the circle is inside the scrollbar element. the scrollbar element is being centered, but I expected that the circle would always have a native / starting y of 0 relative to its position inside its parent. I guess I haven't seen the size of the window impact transforms of child elements like this before. 

Yeah, it's probably related to getBoundingClientRect() reporting.

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