Jelly

export function jelly(el) {
  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return () => {}

  el.style.display = 'inline-block'
  el.style.transformOrigin = '50% 100%'
  const easing = 'linear(0.0000,0.1663,0.4004,0.6594,0.9061,1.1127,1.2621,1.3480,1.3730,1.3469,1.2835,1.1985,1.1068,1.0212,0.9509,0.9013,0.8743,0.8685,0.8800,0.9039,0.9347,0.9670,0.9967,1.0205,1.0368,1.0452,1.0462,1.0414,1.0324,1.0214,1.0100,0.9998,0.9917,0.9864,0.9838,0.9838,0.9858,0.9891,0.9931,0.9970,1.0006,1.0033,1.0050,1.0058,1.0057,1.0049,1.0037,1.0022,1.0008,0.9996,0.9987,0.9982,0.9979,0.9980,0.9983,0.9988,0.9993,0.9998,1.0002,1.0000)'
  const anim = el.animate([{ transform: 'scale(1, 1)' }, { transform: 'scale(1.15, 0.85)' }], {
    duration: 0.5 * 1000,
    delay: 0 * 1000,
    easing,
    iterations: Infinity,
    direction: 'alternate',
    fill: 'backwards',
  })
  return () => {
    anim.cancel()
    el.style.display = ''
    el.style.transformOrigin = ''
  }
}