Draggable Throw with Inertia Velocity

[pdub888]

I am building a rotating circle which you can "throw" by dragging. It has snap points as well.

I have set the throwResistance down very low.

This works great in desktop as you have enough drag distance with the mouse to really spin the sucker.

Unfortunately, it's tougher to do in mobile - one swipe may only move it one section over.

 

Is there a way, besides setting throwResistance down which I already did ( from 1000 ), to get the speed of the initial throw to increase?
 

function setUpDrag(){
		
		gsap.set("#wheel", {transformOrigin:"50% 50%"});
		// 16 sections - 360/16 = 22.5
		let rotationSnap = 22.5;
		
		const draggable = Draggable.create("#wheel", {
			type: "rotation",
			inertia: true,
			throwResistance:10,
			snap:(endValue)=>{
				return Math.round(endValue / rotationSnap) * rotationSnap;
			},
			onDrag: ()=> {
			},
			onDragEnd : ()=>{
			},
			onThrowComplete: ()=>{
			}
		});
	}

 

[OSUblake]

Hi pdub,

 

Do you have a minimal demo of that because I'm not seeing any issues with that value? Thanks!

[pdub888]

See the Pen zYPBBJY by pwhittemore (@pwhittemore) on CodePen

 

It functions well on desktop. Is there any way to get it to spin faster ( react faster ) with more velocity on mobile?

[GreenSock]

I'm a bit fuzzy on what you're asking here - so if I press my finger in the middle of the blue section, for example, and I start moving...are you saying that you want it to spin FASTER than my finger is actually moving? I checked your demo on my iPhone and it seemed to work perfectly so I must be missing something. 

 

If you want it to move faster than the person's finger is moving, I suppose you could use an invisible proxy element that sits on top of it and then in an onDrag/onThrowUpdate you could apply the rotation to the "real" element with a multiplier. 

[pdub888]

"If you want it to move faster than the person's finger is moving, I suppose you could use an invisible proxy element that sits on top of it and then in an onDrag/onThrowUpdate you could apply the rotation to the "real" element with a multiplier. "

 

Yes sir, that was mostly it.

So because the image has to fill so much width on mobile, it's tougher to spin as far bc of it's size.

BUT, on mobile if you create a proxy element that is a smaller width ( wisely suggested by Jack ), and give it opacity:0 ( or in my pen, opacity .1 so you can see what's happening ) it's easier to get moving quickly.

 

If you want it to move faster than the person's finger is moving, I suppose you could use an invisible proxy element that sits on top of it and then in an onDrag/onThrowUpdate you could apply the rotation to the "real" element with a multiplier. 

 

Thank you.

 

See the Pen zYPBBJY by pwhittemore (@pwhittemore) on CodePen

 

[GreenSock]

Just double-checking, @pdub888, that you're all set now. You didn't still have a GSAP-specific question did you? 

 

Good luck!

[pdub888]

Nope, you solved it, real example ( offline ) working great.

Thank you.