pdub888

Damn son. That's it.

I'm having some issues with basically imitating jqueries slideToggle ( which didn't work well ) and using scrollTo to try and solve the problem. The goal is to click on the button ( just click on the first button ) and to have the content expand down below WITHOUT scrolling down. This works if you are towards the top of the div - before your scrollbar has gotten to the button. But if you scroll past the button and click, it moves you down to the bottom of the page. ( you can see it without my hack if you comment out these lines ) : gsap.to(window, {duration:.1, scrollTo:currScroll}); gsap.to(window, {duration: 2, scrollTo: currScroll}); I'm trying to scroll jack and force it from moving down when it expands - any suggestions?

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

"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. https://codepen.io/pwhittemore/pen/zYPBBJY

https://codepen.io/pwhittemore/pen/zYPBBJY It functions well on desktop. Is there any way to get it to spin faster ( react faster ) with more velocity on mobile?

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: ()=>{ } }); }

He shoots, he scores. Thank you.

I may not be doing this correctly but I'm trying to listen on window resize, refresh the scrollTrigger and then also it's start and end values. The initial create works well. On resize, i'm getting all the logs except for the dynamic function ( getPadding1() and getPadding2() ). On resize, the start and end markers just do not change ( but if i hard refresh the page, it works ). There's probably a little mistake in here i'm not catching - please let me know ( thx ? let w = window.innerWidth; let h = window.innerHeight; let padding1 = h - ((w * .62) * .90); let padding2 = ((w * .62) * .90) + padding1; gsap.registerPlugin(ScrollTrigger); window.onresize = reportWindowSize; ScrollTrigger.addEventListener("refresh", function() { console.log("REFRESHED ") console.log(padding1 + " padding1") }); function reportWindowSize(){ console.log("window size"); let newW = window.innerWidth; let newH = window.innerHeight; padding1 = newH - ((newW * .62) * .90); padding2 = ((newW * .62) * .90) + padding1; console.log(padding1 + " padding1" + " " + padding2); ScrollTrigger.refresh(); } function getPadding1(){ console.log("GETPADDING1" + padding1) return padding1; } function getPadding2(){ return padding2; } const anim1 = gsap.to(".para-clip2", { webkitClipPath: 'inset(0% 0% 0% 0%)', clipPath: 'inset(0% 0% 0% 0%)', ease:Linear.easeNone }); ScrollTrigger.create({ trigger: ".trigger1", animation: anim1, markers: true, start: getPadding1() + "px bottom", end: getPadding2() + "px bottom", scrub: true, invalidateOnRefresh: true });