orion_prime

oh ... on my windows laptop , mouse wheel gives +125 and -125 deltaY on wheel event & if i use two finger scroll on the trackpad i still get wheel event and it has its own easing function with velocity and updates smoothly. so in my case both devices are firing wheel event in the fiddle above but behavior is different is this a windows thing ? or maybe this specific to my laptop. ..some google results confirms trackpad fires onwheel , will have to check on some apple devices also and yes for touch i''ll be using pointerEvents: touchstart touchmove and touchend to to do a similar action ?

Thank you used both the updated tick and tween method in the codepen the tick method looks good ,just need to add the refresh rate thing to the acceleration value the tween method works fine for mouse wheel but fails when using two finger scroll on touchpad

this is what i "thought" would be a better performant solution than tick is it ? also another problem with the tick method, the value goes very close the goal but takes too long to reach it or there is some floating point difference. would like to avoid that. apologies for obsessing too much with performance , i'm going to be using this in three js project and on weaker phones every performance saving measure seems to help

basically i need to tween to the updated wheelPos value & also enable snapping ,easing and also momentum .if possible one way of saying it would be : i want to emulate scrollTrigger's scrub:2 with mouse wheel event Better performance friendly solutions which does not use tick are welcome let wheelPos=0 let deltaY=0 let tweenOutput=0 let accel=0.05 window.onwheel=(event)=>{ deltaY=event.deltaY wheelPos+=event.deltaY div.innerText=String(wheelPos) } gsap.ticker.add(function() { tweenOutput += (wheelPos - tweenOutput) * accel; divT.innerText=String(tweenOutput) });

This pen should be easier to compare with the skew example. The timing needs to be improved but apart from that this seems to working ! BIG THANKS @OSUblake !! https://codepen.io/orion_prime/pen/KKmGwEE One thing i would like is for gsap to update a single value(scrollObj.velocity) then use that value to update multiple objects in the scene.(The number of objects getting tilted is dynamic) let scrollObj = { velocity: 0 } i achieved this by the timeline's onupdate callback, which calls the tiltboxes function, which applies velocity as rotation on each box. does this seem fine ? are there any redflags or tips ? let currentTilt = clamp(self.getVelocity() / 100); function tiltBoxes(){ meshGroup.children.forEach(element => { element.rotation.z =- scrollObj.velocity }) } if (Math.abs(currentTilt) > Math.abs(camera.rotation.x)) { gsap.killTweensOf(camera.rotation); gsap.timeline({onUpdate:tiltBoxes}) .to(scrollObj, { velocity: THREE.MathUtils.degToRad(currentTilt), duration: 0.5, }) .to(scrollObj, { velocity: 0, duration: 0.5, }) }

oh its really close now ! ...the timing and easing seems off & not as polished as the skew example ... maybe this tilt logic is wrong ? current code let currentTilt = clamp(self.getVelocity()/100); gsap.killTweensOf(camera.rotation); gsap.timeline() .to(camera.rotation, { x: THREE.MathUtils.degToRad(currentTilt), duration: 0.5, }) .to(camera.rotation, { x: 0, duration: 0.5, }); https://codepen.io/orion_prime/pen/GRmXXVd

i was reverse engineering this skew example codepen so yeah there's lot of useless stuff Updated codepen v2 its smooth on the first scroll but does not work later on so basically camera.x is 0 at the start then on scroll it needs to go smoothly to the velocity value then come back to camera.x is 0 smoothly

Hello, So i used the ScrollTrigger skew example to tilt the three js camera instead the image skew property. Apart from that, a text div is being translated and sphereGroup is being rotated using gsap value & it is working nicely The problems i face with velocity are: 1 ) there is no smoothing happening when going to the calculated position 2) the above problem also leads to jerk when scroll direction is switched it 3) with mouse wheel the the incremental jumps does not look nice (which could also be solved with better smoothing maybe?) any tips ? suggestions for better gsap to three logic also welcome last function in codpen has all the gsap properties