Why cancelAnimationFrame doesn't cancel the requestAnimationFrame?

505 Views Asked by ukulele At 16 November 2019 at 21:29

I can't figure out why the cancelAnimationFrame method does not cancel the requestAnimationFrame. The console still logs the message. Can anyone provide an explanation?

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="Interaktywny poradnik szybkiego startu dla Brackets.">
    <link rel="stylesheet" href="test.css">

  </head>
  <body>

<div class="box1" style="height:100px;width:100px;background:red">
</div>

</body>

<script>

let container;
container = document.getElementsByClassName('box1')[0];
let increase=0
let animate;
         function increaseHeight(){
                    increase = increase + 2;
                    container.style.height=increase + "px";
          if(increase>200){
            console.log("cancelAnimation");
          cancelAnimationFrame(animate)
          }
      animate = requestAnimationFrame(increaseHeight);
        }
    increaseHeight();
</script>

</html>

Original Q&A

There are 2 best solutions below

Bergi On 16 November 2019 at 21:33

I think what you really want to do is

const container = document.getElementsByClassName('box1')[0];
let increase = 0;
function increaseHeight() {
    if (increase < 200) {
        increase = increase + 2;
        container.style.height = increase + "px";
        requestAnimationFrame(increaseHeight); // continue animation
    } else {
        console.log("stopping animation");
    }
}
increaseHeight();

No cancellation necessary.

frodo2975 On 16 November 2019 at 21:34

It's not cancelling because you're requesting a new frame after you cancel the one that's already run. You need to put your new frame request inside the if(increase<200){ block. Also, you actually shouldn't be cancelling anything. An animation frame request only runs once, then if you want to run another, you have to request another. So, when your animation is done, just don't request another one, and you'll be good.

Why cancelAnimationFrame doesn't cancel the requestAnimationFrame?

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in ANIMATION

Related Questions in REQUESTANIMATIONFRAME

Related Questions in CANCELANIMATIONFRAME

Trending Questions

Popular # Hahtags

Popular Questions