pdub888 Posted February 2, 2022 Share Posted February 2, 2022 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: ()=>{ } }); } Link to comment Share on other sites More sharing options...
OSUblake Posted February 2, 2022 Share Posted February 2, 2022 Hi pdub, Do you have a minimal demo of that because I'm not seeing any issues with that value? Thanks! Link to comment Share on other sites More sharing options...
pdub888 Posted February 2, 2022 Author Share Posted February 2, 2022 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? 1 Link to comment Share on other sites More sharing options...
Solution GreenSock Posted February 3, 2022 Solution Share Posted February 3, 2022 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. 1 Link to comment Share on other sites More sharing options...
pdub888 Posted February 3, 2022 Author Share Posted February 3, 2022 "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 1 Link to comment Share on other sites More sharing options...
GreenSock Posted February 3, 2022 Share Posted February 3, 2022 Just double-checking, @pdub888, that you're all set now. You didn't still have a GSAP-specific question did you? Good luck! Link to comment Share on other sites More sharing options...
pdub888 Posted February 3, 2022 Author Share Posted February 3, 2022 Nope, you solved it, real example ( offline ) working great. Thank you. 1 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now