$('.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/