Optimize changing trace color on hover

In this reprex Im changing the opacity of the hovered over line, but the change is really slow - is there any way to optimize this process when you have a lot of traces?

codepen: https://codepen.io/MayaRGans/pen/LYQJdqZ?editors=1111

<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="myDiv"></div>
  <script>
  </script>
</body>
</html>
let x = []
for (let i = 0; i < 100; i++) {
  x.push([1,2,3,4])
}

let y = []
for (let i = 0; i < 50; i++) {
  y.push(Array.from({length: 4}, () => Math.floor(Math.random() * 40)))
}


let plotData = x.map((n,i) => {
  return ({
    x: n,
    y: y[i],
    type: 'scattergl',
    mode: 'lines',
    hoverinfo: 'none'
  })
})

const plotDiv = document.getElementById('myDiv');
Plotly.newPlot(plotDiv, plotData).then(gd => {
  gd.on('plotly_hover', d => {
   var curveNumber = d.points[0].curveNumber
   var opacity_vals = gd.data.map((_,i)=> i === curveNumber ? 1 : 0.2)
  Plotly.restyle(gd, 'opacity', opacity_vals)
  }).on('plotly_unhover', d => {
    var opacity_vals = gd.data.map(x => 1)
    Plotly.restyle(gd, 'opacity', opacity_vals)
  })
})

any help appreciated!

I updated the code in the codepen so that it works, it’s just really slow with a lot of lines!