Skew Shift

export function skewShift(el) {
  const _reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
  const _duration = _reducedMotion ? 0.01 : 0.3

  el.style.display = 'inline-block'
  const easing = 'linear(0.0000,0.0987,0.1899,0.2740,0.3513,0.4224,0.4874,0.5467,0.6008,0.6499,0.6943,0.7343,0.7703,0.8025,0.8311,0.8566,0.8790,0.8987,0.9159,0.9308,0.9437,0.9546,0.9639,0.9717,0.9781,0.9834,0.9877,0.9910,0.9937,0.9957,0.9972,0.9982,0.9990,0.9994,0.9997,0.9999,1.0000,1.0000,1.0000,1.0000)'
  let current = null
  const animateTo = (transform) => {
    const from = getComputedStyle(el).transform
    current?.cancel()
    current = el.animate([{ transform: from }, { transform }], {
      duration: _duration * 1000,
      easing,
      fill: 'forwards',
    })
  }
  const enter = () => animateTo('translateX(6px) skewX(-8deg)')
  const leave = () => animateTo('none')
  const ons = [['pointerenter', enter], ['pointerleave', leave], ['focus', enter], ['blur', leave]]
  ons.forEach(([e, fn]) => el.addEventListener(e, fn))
  return () => {
    current?.cancel()
    ons.forEach(([e, fn]) => el.removeEventListener(e, fn))
    el.style.display = ''
  }
}