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 개 장면이있다. 그게 내가 이런 식으로하지 않고하고 있어요 마우스 휠 SVG 모프에 있기 때문에

내 주요 성능 문제가 ScrollMagic 관련이있을 것 같지 않습니다 다음

// 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 장면에 붙이면 어떻게 할 지 알 수 없습니다. 내 메인 화면에 애니메이션 지터 (맥북 "13 프로)하지만 내 두 번째 넓은 화면에 괜찮이 그렇게 이상한 것을

주.

출처

2016-08-31 Mteuahasan

마우스 휠이나 스크롤을들을 때 스로틀을 사용하십시오. – evolutionxbox

답변 해 주셔서 감사합니다. 스로틀은 내 프레임 속도를 변경하지 않지만 그 저하를 일으킨 원인을 파악합니다. 내 svg가 변형 된 동안 규모 변경을 적용하고있었습니다. 그것 없이는 더 좋은 방법이지만 화면의 차이점을 설명하지는 않습니다. – Mteuahasan

체크 아웃 lodash throttle documentation는 예 정확히 무엇을이다 (밑줄에 대해서도 마찬가지 임) 이벤트가 너무 많이 발생하지 않도록 할 것입니다. handleUnbuild()에있는 RAF를 사용할 수도 있습니다.

MBP에서만 발생한다는 사실에 대해서는 아마 관련성이 있습니다 두 번째 스크린이 망막이 아니기 때문에)

출처

2016-08-31 14:50:48 Cohars

GSAP 및 ScrollMagic을 사용한 성능 문제

답변

관련 문제