// Define a function that sets the x position of the
// red block.
function setX(x) {
const block = document.getElementById('block'); // get the element
if(x) { // if x was specified, use it as the number of pixels to move the block by
block.style.setProperty('left', `${x}px`);
} else {
block.style.removeProperty('left');
}
}
window.runSimpleAnimation = function() {
const setX = getBlockSetter('block1'); // IGNORE; this creates a function for setting the X of our specific block
let x = 0;
const to_x = 400;
function step() {
setX(x); // moves the block to x
x++;
if(x >= to_x) { clearInterval(interval); }
}
const interval = setInterval(step, 10);
}
window.fpsParameterizedAnimation = function() {
const setX = getBlockSetter('block2'); // IGNORE; this creates a function for setting the X of our specific block
const fps = parseInt(document.getElementById('fps2').value);
let x = 0;
const to_x = 300;
function step() {
setX(x);
x++;
if(x >= to_x) { clearInterval(interval); }
}
const interval = setInterval(step, 1000/fps);
}
window.normalizedFPSAnimation = function() {
const setX = getBlockSetter('block3'); // IGNORE; this creates a function for setting the X of our specific block
const duration = parseInt(document.getElementById('dur3').value) * 1000; // duration in milliseconds
const fps = parseInt(document.getElementById('fps3').value); // frames per second
const to_x = 400;
const animationStarted = Date.now(); // timestamp when we first started
function step() {
const currentTime = Date.now();
const pct = (currentTime - animationStarted) / duration; // number from 0 (just started) to 1 (complete)
setX( pct * to_x);
if(currentTime >= animationStarted + duration) { clearInterval(interval); } // now, check if we're past the duration
document.getElementById('pct3').textContent = (100 * pct).toFixed(2)+'%'; // display the percentage
}
const interval = setInterval(step, 1000/fps);
}
window.fullFPSAnimation = function() {
const setX = getBlockSetter('block4'); // IGNORE; this creates a function for setting the X of our specific block
const duration = parseInt(document.getElementById('dur4').value) * 1000; // duration in milliseconds
const fps = parseInt(document.getElementById('fps4').value); // frames per second
const from_x = 600; // Now, we can specify a **from** and a **to**
const to_x = 200;
const animationStarted = Date.now(); // timestamp when we first started
function step() {
const currentTime = Date.now();
const pct = (currentTime - animationStarted) / duration; // number from 0 (just started) to 1 (complete)
const x = from_x + pct * (to_x - from_x)
setX( x );
if(currentTime >= animationStarted + duration) { clearInterval(interval); } // now, check if we're past the duration
document.getElementById('pct4').textContent = (100 * pct).toFixed(2)+'%'; // display the percentage
}
const interval = setInterval(step, 1000/fps);
}
window.runBasicRAF = function() {
const setX = getBlockSetter('block5'); // IGNORE; this creates a function for setting the X of our specific block
const duration = parseInt(document.getElementById('dur5').value) * 1000; // duration in milliseconds
const from_x = 100;
const to_x = 400;
const animationStarted = Date.now(); // timestamp when we first started
function step() {
const currentTime = Date.now();
const pct = (currentTime - animationStarted) / duration; // number from 0 (just started) to 1 (complete)
const x = from_x + pct * (to_x - from_x)
setX( x );
if(currentTime < animationStarted + duration) { requestAnimationFrame(step); }
document.getElementById('pct5').textContent = (100 * pct).toFixed(2)+'%'; // display the percentage
}
requestAnimationFrame(step);
}
window.runPerformanceRAF = function() {
const setX = getBlockSetter('block6'); // IGNORE; this creates a function for setting the X of our specific block
const duration = parseInt(document.getElementById('dur6').value) * 1000; // duration in milliseconds
const from_x = 0;
const to_x = 400;
const animationStarted = performance.now(); // timestamp when we first started
function step() {
const currentTime = performance.now();
const pct = (currentTime - animationStarted) / duration; // number from 0 (just started) to 1 (complete)
const x = from_x + pct * (to_x - from_x)
setX( x );
if(currentTime < animationStarted + duration) { requestAnimationFrame(step); }
document.getElementById('pct6').textContent = (100 * pct).toFixed(2)+'%'; // display the percentage
}
requestAnimationFrame(step);
}
window.runColorAnimation = function() {
const [from_r, from_g, from_b] = getFromColor();
const [to_r, to_g, to_b] = getToColor();
function setBlockColor(r, g, b) {
document.getElementById('block7').style.setProperty('background-color', `rgb(${r}, ${g}, ${b})`)
}
const duration = parseInt(document.getElementById('dur7').value) * 1000; // duration in milliseconds
const animationStarted = performance.now(); // timestamp when we first started
function step() {
const currentTime = performance.now();
const pct = (currentTime - animationStarted) / duration; // number from 0 (just started) to 1 (complete)
const r = from_r + pct * (to_r - from_r);
const g = from_g + pct * (to_g - from_g);
const b = from_b + pct * (to_b - from_b);
setBlockColor(r, g, b);
if(currentTime < animationStarted + duration) { requestAnimationFrame(step); }
document.getElementById('pct7').textContent = (100 * pct).toFixed(2)+'%'; // display the percentage
}
requestAnimationFrame(step);
}
FileAttachment("Spacing_Timing_with_coin.jpg").image()
window.runEasing = function() {
const setX1 = getBlockSetter('block8'); // set the linear block x
const setX2 = getBlockSetter('block9'); // set eased block x
const duration = parseInt(document.getElementById('dur8').value) * 1000; // duration in milliseconds
const from_x = 0;
const to_x = 400;
const animationStarted = performance.now(); // timestamp when we first started
function step() {
const currentTime = performance.now();
const pct = (currentTime - animationStarted) / duration; // number from 0 (just started) to 1 (complete)
const linear_pos = pct;
const eased_pos = pct<.5 ? 2*pct*pct : -1+(4-2*pct)*pct;
setX1( from_x + linear_pos * (to_x - from_x) );
setX2( from_x + eased_pos * (to_x - from_x) );
if(currentTime < animationStarted + duration) { requestAnimationFrame(step); }
document.getElementById('pct8').textContent = (100 * pct).toFixed(2)+'%'; // display the percentage
}
requestAnimationFrame(step);
}
<style>
#block11 {
background-color: red;
transition: all 3s ease-in-out;
}
#block11.moved {
background-color: blue;
transform: translateX(400px);
}
</style>
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
