Почему грузится CPU и как перенести нагрузку на GPU?
 

Здравствуйте. Я анимирую transform, однако наблюдаю высокую нагрузку на CPU.

Суть анимация такая: при наведении на блок, должно приблизится главное изображение и при перемещении мыши по этому блоку, изображение должно также перемещаться.
Видео: https://yadi.sk/i/XfepvkILc7_0oA
https://jsfiddle.net/j5bcuar3/5/

1. Почему грузится CPU? Ведь, как я понял, при анимации transform грузится CPU не должен.
2. Подскажите, возможно ли как-нибудь оптимизировать эту анимацию, чтобы немного снизить нагрузку и повысить плавность?

Видимо по этому

https://learn.javascript.ru/mousemov...ter-mouseleave

$('.box').mousemove(function(event){
let widthPer = ~~(((event.pageX - this.offsetLeft))*100/this.offsetWidth) - 50,
  heightPer = ~~(((event.pageY - this.offsetTop))*100/this.offsetHeight) - 50;
  gsap.to(this.querySelector('picture'),{
    duration:1,
    x:(widthPer/4)*(-1) + "%",
    y:(heightPer/4)*(-1) + "%",
    overwrite: true,
    ease: "power2.out"
  });
});

Я не знаю, что делает gsap.to, но знаю, что она вызывается на каждое событие move. Фактически каждые 15-16 ms. Если там идет изменение стиля (встроенного или табличного), то это заставляет браузер каждые 15-16 ms перерассчитывать элементы. А это делается CPU, а не GPU/