Share Posted August 21, 2015 Hello! I use GSAP to make infinite animation in the header of http://okcity.pro with TweenLite window.cloudsTween = TweenLite.to(clouds, 100, {'background-position-x': "-1739px", ease: Power0.easeNone, onComplete: window.animateClouds}) But i get 50% cpu usage when i view that page. It is better than with CSS animation and jquery, but still is a lot. Could you suggest a method to speed this infinite animation up? Link to post Share on other sites
Share Posted August 21, 2015 Hello mib32, and Welcome to the GreenSock forums! Without an example we cant test to see the cpu usage. But having said that i see you are animating an image using the background-position-x property. Some things could be causing the spike: background-position-x is a non-standard CSS property. Depending how large your image is (file size, and dimensions), that can be very expensive to animate. Also i would recommend animating background-position, instead of background-position-x and give your position y a fixed value, like zero (0) In GSAP use camelCase when declaring your CSS properties that contain hypens (-) so 'background-position' would become backgroundPosition (no string) Look into using lagSmoothing() .. example of use http://greensock.com/gsap-1-12-0 other unforeseen issues that we dont know unless we see a reduced example since you only provided one line of code window.cloudsTween = TweenLite.to(clouds, 100, {backgroundPosition: "-1739px 0", ease: Power0.easeNone, onComplete: window.animateClouds}) Even though background-position-x and background-position-y are reintroduced and approved for level 4 (CSS4) of backgrounds and borders. They are considered non-standard for level 1,2,3 (CSS1, CSS2, CSS3). So its best to use background-postion (backgroundPosition) over background-position-x. This way your code can work cross browser due to using a non-standard CSS property. Firefox no longer supports background-position-x and background-position-y. I believe only IE and Webkit browsers support this non standard CSS property. But to better assist you please create a codepen example so we can see your code in a live editable environment. We love code we can test! Here is a great video tut by Carl on how to create a codepen demo example. Then we can help you better by seeing what you see, and see your code in context and in action. Resources: GSAP lagSmoothing(): http://greensock.com/docs/#/HTML5/GSAP/TweenMax/static_lagSmoothing/ background-position: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position background-position support: http://caniuse.com/#search=background-position W3C Level 3 (CSS3) Backgrounds & Borders Spec: http://www.w3.org/TR/css3-background/ Thanks 3 Link to post Share on other sites
Solution Share Posted August 22, 2015 Hi mib32 in addition to Jonathan's advise , pls try something like this instead of background position tween : See the Pen KpjJyB by MAW (@MAW) on CodePen 2 Link to post Share on other sites
Share Posted August 22, 2015 Yep, I'd strongly suggest animating the "x" (transform) instead of the background-position because transforms can be GPU-accelerated and are generally easier on the CPU. 4 Link to post Share on other sites
Author Share Posted August 24, 2015 Hi mib32 in addition to Jonathan's advise , pls try something like this instead of background position tween : See the Pen KpjJyB by MAW (@MAW) on CodePen Hi Diaco! Well, i couldn't get significant CPU improvement, but your snippet is still wonderful, it teached me how to get rid of callbacks with repeat: -1, and how to get rid of hardcoding the width, thank you very much for that! It reduced the usage of cpu approximately in a half. I doubt anything could be done more than that. I wonder how its hard for modern CPUs to do such a work. Maybe i should do GIF instead here... Link to post Share on other sites
Share Posted August 24, 2015 It reduced the usage of cpu approximately in a half. I doubt anything could be done more than that. I wonder how its hard for modern CPUs to do such a work. Maybe i should do GIF instead here... A codepen (or project URL) would really help here. Link to post Share on other sites
Author Share Posted August 24, 2015 A codepen (or project URL) would really help here. Project url is http://okcity.pro This codepen pretty accurately shows the situation on my website - See the Pen KpjJyB by MAW (@MAW) on CodePen I'll try to post exact codepen if and as soon as i can! Thanks! Link to post Share on other sites
Share Posted August 24, 2015 Maybe i should do GIF instead here... In my experience, animated GIFs perform extremely poorly. 1 Link to post Share on other sites
