<div class="App">
  <h1>Step 1</h1>

  <div class="Example">
    <div>1. requestAnimationFrame</div>
    <div class="Example-position"></div>
    <div class="Box"></div>
  </div>
</div>
* {
  box-sizing: border-box;
}

body {
  background: #fdfdfd;
  font-family: Helvetica, Arial, sans-serif;
}

.App {
  position: relative;
  max-width: 400px;
  margin: 0 auto;
  padding: 40px 20px;
}

h1 {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 5px;
}

a {
  color: #409ad7;
  text-decoration: none;
  border-bottom: 1px solid #ddd;
  margin-bottom: 20px;
  display: inline-block;
  
  &:hover {
    border-bottom-color: #409ad7;
  }
}

.Example {
  border: 1px solid #ddd;
  border-radius: 3px;
  background: #fff;
  padding: 20px;
  margin-bottom: 10px;
}

.Example-position {
  margin-top: 5px;
  color: #409ad7;
}

.Box {
  width: 30px;
  height: 30px;
  background: #34ba9c;
  margin-top: 20px;
  border-radius: 2px;
}
View Compiled
// --- Global

const MAX_POSITION = 150;

// ---- Request animation frame

const box = document.querySelector('.Box');
const positionElement = document.querySelector('.Example-position');
let position = 0;

function animate() {
  position += 1;

  // Reset position
  if (position > MAX_POSITION) {
    position = 0;
  }

  // Update position
  box.style.transform = `translateX(${ position }px)`;
  positionElement.innerHTML = `${ position.toFixed(2) }px`;

  requestAnimationFrame(animate);
}

animate();
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.