A
A
Artur Karapetyan2019-04-01 14:30:49
css
Artur Karapetyan, 2019-04-01 14:30:49

How to optimize css animation?

Hello toasters!
There is a mouse parallax animation on 15-20 svg elements, the code is below. The problem is that the animation sometimes freezes a little, how can I avoid this?
JS code:

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)`; // чтобы для каждого элемента был свой трансформ, исходя из порядка
        }
      }
    },

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

I looked at the redrawing of layers in devtools, but it seems that the layers are not redrawn, it seems to me that the matter is in calculations in JS, but I'm not sure

Answer the question

In order to leave comments, you need to log in

1 answer(s)
M
MoniKossa, 2019-04-03
@architawr

first take out l = document.querySelectorAll(".layer"); // search for elements, there are about 20 of them,
why are you looking for elements every time?

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question