Text bounces up and down endlessly, like a ball at rest.
export function bounceLoop(el) {
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return () => {}
el.style.display = 'inline-block'
const easing = 'linear(0.0000,0.0022,0.0087,0.0196,0.0348,0.0543,0.0782,0.1065,0.1390,0.1760,0.2173,0.2629,0.3128,0.3672,0.4258,0.4888,0.5562,0.6279,0.7039,0.7843,0.8690,0.9581,0.9752,0.9332,0.8954,0.8621,0.8330,0.8083,0.7880,0.7720,0.7603,0.7530,0.7501,0.7515,0.7572,0.7673,0.7817,0.8004,0.8235,0.8510,0.8828,0.9189,0.9594,0.9979,0.9772,0.9608,0.9487,0.9410,0.9377,0.9386,0.9440,0.9537,0.9677,0.9860,0.9960,0.9881,0.9846,0.9854,0.9905,1.0000)'
const repeatDelay = 0.6 * 0.4
const activeFraction = 0.6 / (0.6 + repeatDelay)
const anim = el.animate(
[
{ transform: 'translateY(-20px)', offset: 0 },
{ transform: 'none', offset: activeFraction, easing },
{ transform: 'none', offset: 1 },
],
{
duration: (0.6 + repeatDelay) * 1000,
delay: 0 * 1000,
iterations: Infinity,
fill: 'backwards',
},
)
return () => {
anim.cancel()
el.style.display = ''
}
}