Js animation uses about 90% CPU. What can I do to fix it?

Question

I have four absolute positioned divs, each of them includes png image with css rule “object-fit: cover”. Animation proceeds through gradual decrease of opacity of each div. Animation function is invoked with requestAnimationFrame.

I’ve thought such conditions can’t lead to overuse of CPU.
So, there are 2 questions.
1. Can I use such animation code in the point of UX?
2. How can I decrease CPU usage?
Here is the js code:

// collection of divs
var sliderWrapperSlide = 
    document.getElementsByClassName('slider-wrapper__slide');
// collection of buttons
var sliderNavigationButton = 
document.getElementsByClassName('slider-navigation__button');    
// number of active div. Animation starts from last div
var slidesNumber = sliderWrapperSlide.length - 1;
// all divs get "opacity: 1" and "z-index: 2"
for (var i = 0; i <= slidesNumber; i++) {
 sliderWrapperSlide[i].style.opacity = 1;
 sliderWrapperSlide[i].style.zIndex = 2; 
}
// button of active div gets corresponding class
sliderNavigationButton[slidesNumber].classList.add('slider-navigation__button_active');
// variable to stop animation in the case of button click.
// Default value "1" permits animation
var sliderPlay = 1;
// addEventListener for buttons. It determines required 
// number of div and changes "sliderPlay" value to "0" for 
// animation break
var sliderNavigation = document.getElementById('id-slider-navigation');
sliderNavigation.addEventListener('click', function(e) {
        if (e.target && e.target.nodeName == "A") {
         for (var i = 0; i < sliderNavigationButton.length; i++) {
          if (sliderNavigationButton[i] == e.target) {           
           slidesNumber = i;           
           sliderPlay = 0;           
          }          
         }
        }
});   
// animation function
function opacityImageDecrease() {   
    var slideOpacity = 
    Number(sliderWrapperSlide[slidesNumber].style.opacity);   
    // check whether opacity is not naught and any button is not clicked,
     // if it is so opacity of div starts gradually decrease by 0.005
     if (slideOpacity != 0 && sliderPlay == 1) {
         slideOpacity -= 0.005;
         sliderWrapperSlide[slidesNumber].style.opacity = slideOpacity;        
         requestAnimationFrame(opacityImageDecrease); 
    } else {
      // if opacity is naught or button is pressed
         sliderNavigationButton[slidesNumber].classList.remove('slider-navigation__button_active');
         slidesNumber -= 1; 
          // then it checks is any button is pressed.       
         if (sliderPlay == 0) {               
                slidesNumber += 1;               
                sliderWrapperSlide[0].style.zIndex = 2;
                for (var j = 0; j < sliderWrapperSlide.length; j++) {
                 if (j <= slidesNumber) {
                  sliderWrapperSlide[j].style.opacity = 1;        
                 } else {
                  sliderWrapperSlide[j].style.opacity = 0;
                 }
                 sliderNavigationButton[j].classList.remove('slider-navigation__button_active');                     
                }
                sliderNavigationButton[slidesNumber].classList.add('slider-navigation__button_active');
                if (slidesNumber == 0) {
                 sliderWrapperSlide[0].style.zIndex = 3;
                 for (var i = 1; i < sliderWrapperSlide.length; i++) {
               sliderWrapperSlide[i].style.opacity = 1;
           }
                }
                sliderPlay = 1;
                requestAnimationFrame(opacityImageDecrease);
          // There is simple code for all divs except first div.      
         } else if (slidesNumber > 0) {
          sliderNavigationButton[slidesNumber].classList.add('slider-navigation__button_active');
          requestAnimationFrame(opacityImageDecrease);
            // That is certain code for first div.
         } else if (slidesNumber == 0) {
          sliderNavigationButton[slidesNumber].classList.add('slider-navigation__button_active');
          sliderWrapperSlide[0].style.zIndex = 3;
          for (var i = 1; i < sliderWrapperSlide.length; i++) {
           sliderWrapperSlide[i].style.opacity = 1;
          }
          requestAnimationFrame(opacityImageDecrease); 
            // And some code to finish animation cycle and start another one.         
         } else if (slidesNumber == -1) {           
          sliderWrapperSlide[0].style.zIndex = 2;
          sliderWrapperSlide[0].style.opacity = 1;
          slidesNumber =  sliderWrapperSlide.length - 1;
          sliderNavigationButton[slidesNumber].classList.add('slider-navigation__button_active');
          requestAnimationFrame(opacityImageDecrease);
         }    
    }
}
requestAnimationFrame(opacityImageDecrease);

And this is link to site: http://883755.prykrasy.web.hosting-test.net/ttr/

Possible duplicate of [Controlling fps with requestAnimationFrame?](http://stackoverflow.com/questions/19764018/controlling-fps-with-requestanimationframe) — JDB, Sep 16 '16 at 18:13
You are asking the browser to animate at the fastest possible rate, or highest FPS. Usually you don't need FPS that high. To bring down your FPS (and CPU usage), throttle your usage of animation frame. See http://stackoverflow.com/questions/19764018/controlling-fps-with-requestanimationframe — JDB, Sep 16 '16 at 18:14
It looks like the only thing you are animating is opacity? You definitely don't need frame by frame JS to do this. Just use css transitions. — Brian Glaz, Sep 16 '16 at 18:15
@JDB Thank's! I'll try to apply this solution. But if my animation would need so high FPS. Is there any solution to bring down CPU in this case? — Aleks Sid, Sep 16 '16 at 18:31
@BrianGlaz But I need to control the animation with buttons, therefore I decided to animate with js. I didn't mention button controls in question. Sorry:) — Aleks Sid, Sep 16 '16 at 18:34
@AleksSid - If you think about that question for a minute, I hope you'll realize the answer yourself. In case you don't... it's like asking how to reduce your workload without removing any tasks. If you ask the processor to do something everything 1/1000th of a second, then your CPU usage is going to be high. Period. — JDB, Sep 16 '16 at 18:37
@AleksSid When a button is clicked you can just add or remove a class `.slide{ opacity: 1; transition: opacity 1s; } .slide.faded{opacity: 0;}` `$button.on('click', function() { $('.slide').addClass('faded');});` — Brian Glaz, Sep 16 '16 at 18:38

Js animation uses about 90% CPU. What can I do to fix it?

0 Answers0