使用GSAP和ScrollMagic的性能問題

我目前正在使用GSAP的TimelineMax，MorphSVG插件和ScrollMagic構建網站。使用GSAP和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，因爲這是一個鼠標滾輪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" ），但我的第二較寬的屏幕上精細而這是如此奇怪。

來源

2016-08-31 Mteuahasan

聆聽鼠標滾輪或滾動時使用油門。 – evolutionxbox

感謝您的回答。油門不會改變我的幀率，但我找出是什麼原因造成的。當我的svg變形時，我正在應用比例變化。沒有，但沒有解釋屏幕之間的區別。 – Mteuahasan

退房的lodash throttle documentation，這個例子正是你我猜你也可以在handleUnbuild()中使用RAF

關於它只發生在你的MBP上的事實，它可能與性能有關（可能是與下劃線相同）因爲你的第二個屏幕不是視網膜我猜）

來源

2016-08-31 14:50:48 Cohars

使用GSAP和ScrollMagic的性能問題

回答

相關問題