Total: Today: Yesterday:
연구소/TweenMax | 2017. 10. 18. 22:55 | Posted by 자수씨

HTML5 애니메이션 라이브러리로 TweenMax 를 사용할 경우 화면을 최소화 하거나 다른 탭에 의해 가려져 있으면 애니메이션이 동작하지 않는다.


그 이유는 기본적으로 TweenMax 애니메이션이 requestAnimationFrame 이벤트에 의해 동작하게 되는데, HTML5 의 특성인지 브라우저의 특성인지는 알 수 없지만 해당 이벤트가 발생하지 않기 때문이다.


따라서, 다음과 같이 설정을 해주어야 원하는 결과를 얻을 수 있다.


TweenMax.ticker.useRAF(false);


위의 useRAF() 함수는 requestAnimationFrame 의 사용여부를 설정하는 함수인데, 인자를 FALSE 로 넘길 경우 requestAnimationFrame 대신에 setTimeout() 함수를 통해 애니메이션이 처리된다.



관련사이트: https://greensock.com/docs/TweenMax/static.ticker