feat: add support for custom normalize-wheel handler

[lavolpecheprogramma]

trafficstars

Hi, i wrote this PR to enable a custom normalize-wheel handler, so the end user can choose how normalize the wheel. For example using the normalize-wheel package

This is an example

import { gsap } from 'gsap'
import normalizeWheel from 'normalize-wheel'

const calculate = (value: number, intent:number, inertial: number) => {
  const direction = value > 0 ? 1 : -1
  const clamped = gsap.utils.clamp(0, 1, Math.abs(value / 100))
  const inertiaFactor = Math.abs(value) >= 100 ? intent : inertial

  return {
    delta: direction * clamped * inertiaFactor,
    direction
  }
}

export function getNormalizeWheel (event: WheelEvent, intent = 0.02, inertial = 0.04) {
  const { pixelX, pixelY } = normalizeWheel(event)
  const { delta: deltaX, direction: directionX } = calculate(pixelX, intent, inertial)
  const { delta: deltaY, direction: directionY } = calculate(pixelY, intent, inertial)

  return {
    deltaX,
    deltaY,
    directionX,
    directionY,
    event
  }
}

Thanks for this amazing library!

[vercel[bot]]

Someone is attempting to deploy a commit to the Studio Freight Team on Vercel.

A member of the Team first needs to authorize it.

[clementroche]

This package is 7 years old, have you tested it on differents devices/browsers ?

[lavolpecheprogramma]

HI @clementroche, this is just an example. The PR would allow the final user to pass any handler he wants.

[lavolpecheprogramma]

I provide you a better example of the actual usage:

const lenis = new Lenis({
  // ...
  normalizeWheel: ({deltaX, deltaY}) => {
    // whatever you want to normalize values
    return { deltaX, deltaY}
  }
})

[clementroche]

ah i see, it's more like an "event modifier" then. Allowing anyone to alterate the inputs.

[lavolpecheprogramma]

yes exactly :) so with this PR you could use both true/false to enable/disable the built-in normalization (as is) and a custom function to apply any normalization (without changes on the lenis core package)

[Gabriel-Norman]

Any news on this one? I think this feature would be helpful to balance out the strength difference between inertial wheel scroll and the classic one.

[clementroche]

virtualScroll options can be used to manually modify the events before they get consumed. If false is returned, the scroll will not be smoothed. Examples: (e) => { e.deltaY /= 2 } (to slow down vertical scroll) or ({ event }) => !event.shiftKey (to prevent scroll to be smoothed if shift key is pressed)