title: requestAnimationFrame and getComputedStyle don't work as expected (following along Jake Archibalds "In the Loop" speech)
body: <p>I am watching and following along Jake Archibald's speech about the Event Loop. At some point he attemps to move a box, first to 1000px and then back to 500px. You can also watch in the video here:</p>
  <p><a href="https://youtu.be/cCOL7MC4Pl0?t=1329" rel="nofollow noreferrer">Jake Archibald: In The Loop - JSConf.Asia (22:10)</a></p>
  <p>He offers two solutions and I couldn't get any of them  to work for me, even though (I think) I am doing exactly the same. The first solution is this:</p>
  <pre><code>button.addEventListener(&quot;click&quot;, () =&gt; {
  box.style.transform = &quot;translateX(1000px)&quot;;
  box.style.transition = &quot;transform 1s ease-in-out&quot;;
  
  requestAnimationFrame(() =&gt; {
    requestAnimationFrame(() =&gt; {
      box.style.transform = &quot;translateX(500px)&quot;;
    });
   });
  });
  </code></pre>
  <p>And the second &quot;hacky&quot; one, as he says, is this:</p>
  <pre><code>button.addEventListener(&quot;click&quot;, () =&gt; {
     box.style.transform = &quot;translateX(1000px)&quot;;
     box.style.transition = &quot;transform 1s ease-in-out&quot;;
     getComputedStyle(box).transform;
     box.style.transform = &quot;translateX(500px)&quot;;
  </code></pre>
  <p>});</p>
  <p>On both occasions the box just moves to 500px, while it should first move to 1000px and then back to 500px.</p>
  <p>Am I missing something? Am I doing something wrong? Or have things changed that much since 2018 so that this solution doesn't work anymore?</p>
  <p>P.S. I am using Chrome Version 102.0.5005.61 on Ubuntu 22.04.</p>