使用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的性能问题

回答

相关问题