Search code examples
javascripthtmlcssevent-looprequestanimationframe

requestAnimationFrame appears to be invalid

I watched Jake Archibald's talk recently. He gave an example in his speech where he says to use requestAnimationFrame twice to delay applying a CSS style to perform a CSS animation.

See https://youtu.be/cCOL7MC4Pl0?t=1337

I reproduced the example to test it, but without luck:

The box will move directly to a position of 500px, instead of going from 1000px to 500px.

Jake Archibald's a solution was proposed. use a two-layer nested requestAnimationFrame

image

But it doesn't seem to work for me. Why?

Here is the code snippet that should work but doesn't:

const box = document.getElementById("box");
box.addEventListener("click", ()=>{
  box.style.transform = 'translateX(500px)';
  box.style.transition = 'transform 1s ease-out';
  requestAnimationFrame(()=>{
    requestAnimationFrame(()=>{
        box.style.transform = 'translateX(250px)';
    });
  });
});
#box {
  background-color: salmon;
  height: 100px;
  width: 100px;
  cursor: pointer;
}
<div id="box">box</div>

Solution

  • Something like this ?

    const box = document.getElementById("box");
box.addEventListener("click", ()=>{
  box.style.transform = 'translateX(500px)';
  requestAnimationFrame(()=>{
    box.style.transition = 'transform 1s ease-out';
    requestAnimationFrame(()=>{
        box.style.transform = 'translateX(250px)';
    });
  });
});
    #box {
  background-color: salmon;
  height: 100px;
  width: 100px;
  cursor: pointer;
}
    <div id="box">box</div>