Как оптимизировать css-анимацию?

Question

[Артур Карапетян]

Здравствуйте, тостеровчане!
Есть mouse parallax анимация на 15-20 svg-элементах, код ниже. Проблема в том, что анимация иногда слегка подвисает, как можно этого избежать?

Код JS:

move($event) {
      const mouseX = $event.pageX,
        mouseY = $event.pageY,
        w = this.particlesBgWidth / 2 - mouseX,
        h = this.particlesBgHeight / 2 - mouseY,
        l = document.querySelectorAll(".layer"); // поиск элементов, их около 20

      if (this.particlesBgWidth > 900) {  // проверка ширины экрана, чтобы на экранах < 900 px параллакса не было
        for (var i = 0; i < l.length; i++) {
          let t = i !== 0 ? i : 1; // чтобы в вычислениях ниже i не было равно 0
          l[i].style.transform = `translate3d(${w / (t * -6.2)}px, ${h /
            (t * 4.5)}px, 0) rotate(${l[i].dataset.deg}deg)`; // чтобы для каждого элемента был свой трансформ, исходя из порядка
        }
      }
    },

Стили:

.layer {
    position: absolute;
    transition: transform ease 0.2s;
    will-change: transform;
  }

Смотрел на перерисовку слоев в devtools-ах, но вроде бы слои не перерисовываются, мне кажется, что дело в вычислениях в JS, но я не уверен

Answer 1

[MoniKossa]

для начала вынести l = document.querySelectorAll(".layer"); // поиск элементов, их около 20
зачем каждый ты каждый раз ищешь элементы?

Comments

[Артур Карапетян]

Хорошо, спасибо, можно ли как-то оптимизировать цикл и вычисления в нем?