Make requestAnimationFrame example have much less celebration (mdn#35408

)

files/en-us/web/api/dedicatedworkerglobalscope/requestanimationframe/index.md

@@ -28,9 +28,14 @@ requestAnimationFrame(callback)
 ### Parameters
 
 - `callback`
-  - The function to call when it's time to update your animation for the next repaint. This callback function is passed a single argument: a {{domxref("DOMHighResTimeStamp")}} indicating the end time of the previous frame's rendering (based on the number of milliseconds since [time origin](/en-US/docs/Web/API/Performance/timeOrigin)).
-  - The timestamp is a decimal number, in milliseconds, but with a minimal precision of 1 millisecond. The timestamp value is also similar to calling {{domxref('performance.now()')}} at the start of the callback function, but it is never the same value.
-  - When multiple callbacks queued by `requestAnimationFrame()` begin to fire in a single frame, each receives the same timestamp even though time has passed during the computation of every previous callback's workload.
+
+  - : The function to call when it's time to update your animation for the next repaint. This callback function is passed a single argument:
+
+    - `timestamp`
+
+      - : A {{domxref("DOMHighResTimeStamp")}} indicating the end time of the previous frame's rendering (based on the number of milliseconds since [time origin](/en-US/docs/Web/API/Performance/timeOrigin)). The timestamp is a decimal number, in milliseconds, but with a minimal precision of 1 millisecond. The timestamp value is also similar to calling {{domxref('performance.now()')}} at the start of the callback function, but it is never the same value.
+
+        When multiple callbacks queued by `requestAnimationFrame()` begin to fire in a single frame, each receives the same timestamp even though time has passed during the computation of every previous callback's workload.
 
 ### Return value
 

files/en-us/web/api/window/requestanimationframe/index.md

@@ -38,22 +38,14 @@ requestAnimationFrame(callback)
 ### Parameters
 
 - `callback`
-  - The function to call when it's time to update your animation for the next
-    repaint. This callback function is passed a single argument: a
-    {{domxref("DOMHighResTimeStamp")}} indicating the end time of the previous frame's
-    rendering (based on the number of milliseconds since
-    [time origin](/en-US/docs/Web/API/Performance/timeOrigin)).
-  - The timestamp is a decimal number, in milliseconds, but with a minimal
-    precision of 1 millisecond. For `Window` objects (not `Workers`), it is equal to
-    {{domxref("AnimationTimeline/currentTime", "document.timeline.currentTime")}}. This timestamp is shared
-    between all windows that run on the same agent (all same-origin windows
-    and, more importantly, same-origin iframes) — which allows synchronizing
-    animations across multiple `requestAnimationFrame` callbacks. The timestamp
-    value is also similar to calling {{domxref('performance.now()')}} at the start
-    of the callback function, but it is never the same value.
-  - When multiple callbacks queued by `requestAnimationFrame()` begin to fire in
-    a single frame, each receives the same timestamp even though time has passed
-    during the computation of every previous callback's workload.
+
+  - : The function to call when it's time to update your animation for the next repaint. This callback function is passed a single argument:
+
+    - `timestamp`
+
+      - : A {{domxref("DOMHighResTimeStamp")}} indicating the end time of the previous frame's rendering (based on the number of milliseconds since [time origin](/en-US/docs/Web/API/Performance/timeOrigin)). The timestamp is a decimal number, in milliseconds, but with a minimal precision of 1 millisecond. For `Window` objects (not `Workers`), it is equal to {{domxref("AnimationTimeline/currentTime", "document.timeline.currentTime")}}. This timestamp is shared between all windows that run on the same agent (all same-origin windows and, more importantly, same-origin iframes) — which allows synchronizing animations across multiple `requestAnimationFrame` callbacks. The timestamp value is also similar to calling {{domxref('performance.now()')}} at the start of the callback function, but it is never the same value.
+
+        When multiple callbacks queued by `requestAnimationFrame()` begin to fire in a single frame, each receives the same timestamp even though time has passed during the computation of every previous callback's workload.
 
 ### Return value
 
@@ -72,28 +64,20 @@ milliseconds) with `0.1 * elapsed`. The element's final position is 200px
 
 ```js
 const element = document.getElementById("some-element-you-want-to-animate");
-let start, previousTimeStamp;
-let done = false;
+let start;
 
 function step(timeStamp) {
   if (start === undefined) {
     start = timeStamp;
   }
   const elapsed = timeStamp - start;
 
-  if (previousTimeStamp !== timeStamp) {
-    // Math.min() is used here to make sure the element stops at exactly 200px
-    const count = Math.min(0.1 * elapsed, 200);
-    element.style.transform = `translateX(${count}px)`;
-    if (count === 200) done = true;
-  }
-
-  if (elapsed < 2000) {
-    // Stop the animation after 2 seconds
+  // Math.min() is used here to make sure the element stops at exactly 200px
+  const shift = Math.min(0.1 * elapsed, 200);
+  element.style.transform = `translateX(${shift}px)`;
+  if (shift < 200) {
     previousTimeStamp = timeStamp;
-    if (!done) {
-      window.requestAnimationFrame(step);
-    }
+    window.requestAnimationFrame(step);
   }
 }