Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
mib32

CPU Usage

Recommended Posts

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 comment
Share on other sites

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 :)

  • Like 3
Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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. 

  • Like 4
Link to comment
Share on other sites

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 comment
Share on other sites

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 comment
Share on other sites

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 comment
Share on other sites

Maybe i should do GIF instead here...

 

In my experience, animated GIFs perform extremely poorly.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×