Оценка производительности с использованием GSAP и ScrollMagic

Question

В настоящее время я создаю сайт с помощью TimelineMax, плагина MorphSVG и ScrollMagic.

Я столкнулся джиттера эффект иногда и это предупреждение выходит:

Handling of 'mousewheel' input event was delayed for 163 ms due to main thread being busy. Consider marking event handler as 'passive' to make the page more responive.

У меня есть 1 ScrollMagic контроллер и 4 сцены прилагается.

Моя главная проблема производительности не кажется, связано с ScrollMagic, потому что это на MouseWheel морфа, что SVG я делаю без него, как это:

// GSAP Morph tween 
self.tl.to(".chapter1 #assembled .logo", 2, {morphSVG:"#exploded .logo", fill: '#18c5a3'}) 
.from(".chapter1 #assembled .logo", 1, {opacity: 1}) 
.to(".chapter1 #assembled .logo", 1, {opacity: 0}) 

// Progress the tween on mousewheel 
function handleUnbuild() { 
    self.tl.progress(window.pageYOffset/500).pause() 
} 
window.addEventListener('mousewheel', handleUnbuild, {passive: true}) 

Без ScrollMagic тогда ... Я пытался прикрепите эту анимацию к сцене SM, но я не мог понять, как это сделать.

Обратите внимание, что анимация джиттера на основном экране (Macbook Pro 13"), но это хорошо на моем втором широком экране, и это так странно.

Answer 1

Отъезд lodash throttle documentation, пример именно то, что вам (так же, как подчеркивание), это предотвратит многократное срабатывание события. Возможно, вы также можете использовать RAF в handleUnbuild().

Что касается того, что это происходит только на вашем MBP, это, вероятно, как ваш второй экран не Retina, я думаю).