Add snapping to a continuously updating value

[orion_prime 1 Likes (Newbie)]

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)
});

 

See the Pen WNjPBeO by orion_prime (@orion_prime) on CodePen

[OSUblake 18,364 Likes (Superhero)]

42 minutes ago, orion_prime said:

Better performance friendly solutions which does not use tick are welcome

 

The solution you provide is a good one, and very performant! 

 

An old demo. The onFrame would be the same as GSAP's ticker.

 

See the Pen ee9e27534440ef6ee1c2e2fdfd6c7e68 by osublake (@osublake) on CodePen

 

Although that's not accounting for high refresh monitors, like in this demo.

 

See the Pen WNNNBpo by GreenSock (@GreenSock) on CodePen

 

For snapping, you can use the snap utility.

 

ScrollTrigger's scrub is just a tween. Nothing special.

 

const obj = {
  value: 0
};

// on wheel
gsap.to(obj, {
  value: "+=" + event.deltaY,
  duration 2,
  ease: "power3"
});

 

 

[OSUblake 18,364 Likes (Superhero)]

You should also check out the InertiaPlugin as it can smoothly bring stuff to stop.

[orion_prime 1 Likes (Newbie)]

45 minutes ago, OSUblake said:

For snapping, you can use the snap utility.

 

ScrollTrigger's scrub is just a tween. Nothing special.

 

const obj = {
  value: 0
};

// on wheel
gsap.to(obj, {
  value: "+=" + event.deltaY,
  duration 2,
  ease: "power3"
});

 

 

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

[OSUblake 18,364 Likes (Superhero)]

1 hour ago, orion_prime said:

this is what i "thought" would be  a better performant solution than tick

 

Every animation GSAP does is driven by a tick. The same goes for rendering in three.js. The "tick" is how animations are done, so it's very performant. Since tweens and timelines use a ticker, they won't perform better. They just make it easier to create and control your animations.

 

1 hour ago, orion_prime said:

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.

 

That's because technically it will never reach the end value doing it that way. The amount of movement just gets smaller and smaller. Go look up Zeno's Dichotomy Paradox.

 

The way around that is to force it to complete if the difference is below a certain threshold. Something like...

 

let delta = wheelPos - tweenOutput;

if (Math.abs(delta) < 0.1) {
  // force it to complete
  tweenOutput = wheelPos;
} else {
  // do the update
  tweenOutput += delta * accel;
}

 

1 hour ago, orion_prime said:

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

 

I wouldn't focus too much on performance unless you notice a problem. You might just end up wasting a lot of time on something that was never going to be a problem. And you're using Three.js, so it's going to perform well. Most performance issues come from animating HTML and SVG elements. WebGL (three.js) is super fast because it works with the GPU.

 

[orion_prime 1 Likes (Newbie)]

Thank you

used both the updated tick and tween method in the

See the Pen WNjPBeO by orion_prime (@orion_prime) on 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


 

[nico fonseca 514 Likes (Leader)]

Hey! @orion_prime the mousewheel event doesn't work on touch devices, so you need scroll or touch events.

[orion_prime 1 Likes (Newbie)]

4 hours ago, nicofonseca said:

Hey! @orion_prime the mousewheel event doesn't work on touch devices, so you need scroll or touch events.

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 👍

[nico fonseca 514 Likes (Leader)]

@orion_prime yes trackpad fires wheel event, sorry I misunderstood when you said touchpad I thought that you were talking about touch devices 😅.
It is complicated to normalise the mouse wheel value, because it depends on the device, browser, and if you use trackpad or mouse. 😔