Анимация box-shadow (javascript)?

const lerp = (a, b, t) => (1 - t) * a + t * b;
const shadowColor = 'rgba(0, 0, 0, 0.5)';
let activeEl = null;

const grid = document.querySelector('.center-menu__items');
const gridShadow = document.querySelector('.center-menu--shadow');
const itemsShadow = Array.from(
gridShadow.querySelectorAll('.item'),
el => ({ el, currH: 0, prevH: 0 })
);

grid.addEventListener('mouseover', (e) => {
activeEl = e.target.closest('.item');
});


grid.addEventListener('mouseleave', (e) => {
activeEl = null;
});

function update() {
itemsShadow.forEach(it => {
    const targetH = it.el.dataset.id === activeEl?.dataset.id ? 80 : 0;
    it.currH = lerp(it.prevH, targetH, 0.05);
    it.currH = Math.abs(it.currH - targetH) < 1 ? targetH : it.currH;
    it.prevH = it.currH;
    const blurRadius = it.currH / 4;
    const spreadRadius = it.currH / 4;
    it.el.style.boxShadow = `0 0 ${blurRadius}px ${spreadRadius}px ${shadowColor}`;
});

requestAnimationFrame(update);
}

requestAnimationFrame(update);

.menu__center {
  background: #161616;
  width: 100%;
  height: 100vh;
}

.center-menu__column {
  display: flex;
  flex: 1 1 50%;
  min-height: 100vh;
}

.center-menu__block {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
}

.center-menu__link-1 {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #161616;
  flex: 1 1 380px;
  font-weight: 700;
  font-size: 50px;
  line-height: 61px;
  text-align: center;
  color: #ffffff;
  box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.5);
  padding: 10px;
  transition: all 0.6s ease 0s;
  position: relative;
}

.center-menu__link-2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1 1 50%;
  background: #161616;
  box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.5);
  font-weight: 400;
  font-size: 40px;
  line-height: 49px;
  text-align: center;
  letter-spacing: 0.1em;
  color: #ccba96;
  padding: 10px;
  transition: all 0.8s ease 0s;
}

.center-menu__link-3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1 1 50%;
  background: #161616;
  box-shadow: 12px 0px 40px rgba(0, 0, 0, 0.5);
  font-weight: 700;
  font-size: 40px;
  line-height: 49px;
  text-align: center;
  letter-spacing: 0.1em;
  color: #b99c63;
  padding: 10px;
  transition: all 0.6s ease 0s;
  position: relative;
}

.center-menu--shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.center-menu--shadow .item {
  background-color: transparent;
}

<div class="menu__center center-menu">
  <div class="center-menu__items">
<div class="center-menu__column">
  <div class="item center-menu__link-1 odd-link" data-id="1"><span>нечетный</span></div>
  <div class="center-menu__block">
    <a href="#" class="item center-menu__link-2 even-link" data-id="2"><span>четный</span></a>
    <a href="#" class="item center-menu__link-3 odd-link" data-id="3"><span>нечетный</span></a>
  </div>
</div>
  </div>
  <div class="center-menu__items center-menu--shadow">
<div class="center-menu__column">
  <div class="item center-menu__link-1" data-id="1"><span></span></div>
  <div class="center-menu__block">
    <a href="#" class="item center-menu__link-2" data-id="2"><span></span></a>
    <a href="#" class="item center-menu__link-3" data-id="3"><span></span></a>
  </div>
</div>
  </div>
</div>