Draggable Path Progress

[Romanus 4 Likes (Newbie)]

Hello! I want to get to the console the value that the circle moves to.

I need the trnsform value or the percentage of the path travelled.

How can I do it?

See the Pen KKxGpBz by romanusname (@romanusname) on CodePen

[mvaneijgen 2,480 Likes (Superhero)]

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

[Carl 11,325 Likes (Superhero)]

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

[GreenSock 18,876 Likes (Superhero)]

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? 

[Carl 11,325 Likes (Superhero)]

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. 

 

[GreenSock 18,876 Likes (Superhero)]

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.