<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.