Hover or focus to spread the letters apart.
export function trackingWide(el) {
const _reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
const _duration = _reducedMotion ? 0.01 : 0.35
el.style.display = 'inline-block'
const easing = 'linear(0.0000,0.0750,0.1461,0.2135,0.2772,0.3374,0.3942,0.4476,0.4978,0.5448,0.5889,0.6299,0.6682,0.7037,0.7366,0.7670,0.7949,0.8205,0.8439,0.8651,0.8844,0.9017,0.9172,0.9309,0.9431,0.9537,0.9630,0.9709,0.9776,0.9831,0.9877,0.9914,0.9942,0.9964,0.9979,0.9989,0.9995,0.9999,1.0000,1.0000)'
let current = null
const animateTo = (letterSpacing) => {
const from = getComputedStyle(el).letterSpacing
current?.cancel()
current = el.animate([{ letterSpacing: from }, { letterSpacing }], {
duration: _duration * 1000,
easing,
fill: 'forwards',
})
}
const enter = () => animateTo('0.14em')
const leave = () => animateTo('0em')
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 = ''
}
}