src/js/main.js
// we achieve that by passing 'step' as a parameter to 'requestAnimationFrame' function
we achieve that by passing 'step' as a parameter to 'requestAnimationFrame' function
we achieve that by passing ' step ' as a parameter to ' requestAnimationFrame ' function
function step(startTime) {
      if (!timeWhenLastUpdate) timeWhenLastUpdate = startTime;
      timeFromLastUpdate = startTime - timeWhenLastUpdate;
      if (timeFromLastUpdate > timePerFrame) {
        updateOpacity(
          document.querySelectorAll("." + $element),
          $element,
          frameNumber
        );
        timeWhenLastUpdate = startTime;
        if (frameNumber < totalFrames) {
          frameNumber = frameNumber + 1;
          if (!document.querySelector(`.${$element}-${frameNumber}`)) {
            frameNumber = frameNumber - 1;
          }
        }
      }
      myReq = requestAnimationFrame(step);
    }
function step ( startTime ) { if ( ! timeWhenLastUpdate ) timeWhenLastUpdate = startTime ; timeFromLastUpdate = startTime - timeWhenLastUpdate ; if ( timeFromLastUpdate > timePerFrame ) { updateOpacity ( document . querySelectorAll ( "." + $element ) , $element , frameNumber ) ; timeWhenLastUpdate = startTime ; if ( frameNumber < totalFrames ) { frameNumber = frameNumber + 1 ; if ( ! document . querySelector ( ` ${ $element } ${ frameNumber } ` ) ) { frameNumber = frameNumber - 1 ; } } } myReq = requestAnimationFrame ( step ) ; }
we achieve that by passing 'step' as a parameter to 'requestAnimationFrame' function
we achieve that by passing ' step ' as a parameter to ' requestAnimationFrame ' function
// 'startTime' is provided by requestAnimationName function, and we can consider it as current time // first of all we calculate how much time has passed from the last time when frame was update // then we check if it is time to update the frame // hide all frames // and show the required one // reset the last update time // then increase the frame number or reset it if it is the last frame