Velocity describes how quickly position changes in a particular direction. In an interface, it is the value that turns elapsed time into movement: a positive horizontal velocity moves an element right, a negative one moves it left, and separate x and y velocities let it travel across a two-dimensional canvas. Constant velocity can look mechanical; changing velocity through acceleration, gravity, springs, or friction produces motion that better matches physical expectations. section 12.6 section 12.2
Start with the relationship v = d / t: velocity equals distance divided by time. Animation code usually uses the rearranged form d = v × t. Each frame, measure the elapsed time, multiply it by the current velocity, and add that distance to the current position. A velocity of 200 pixels per second therefore produces the same overall travel rate regardless of how many frames occur per second. section 12.2.1
Move a notification at a stable rate
A notification entering from the left can begin just outside the viewport and update its translateX position on every animation frame. Avoid assuming 60 fps: display refresh rates, CPU load, background-tab throttling, and power saving can all change the interval between frames. Instead, derive deltaTime from performance.now(), convert milliseconds to seconds, then apply position += velocity × deltaTime. Stop requesting frames when the notification reaches its centered position. section 12.2.1
Listing 12.5 Applying the velocity equation using timestamps
const notification = document.getElementById('notification');
const notificationWidth = notification.offsetWidth;
const centerPosition = (window.innerWidth / 2) -
(notificationWidth / 2);
let position = -notificationWidth;
const velocity = 200;
let lastTime = 0;
function animate() {
const currentTime = performance.now(); #1
if (lastTime === 0) lastTime = currentTime; #2
const deltaTime = (currentTime - lastTime) / 1000; #3
lastTime = currentTime; #4
position += velocity * deltaTime; #5
notification.style.transform = `translateX(${position}px)`;
if (position <= centerPosition) {
requestAnimationFrame(animate);
}
}
Use the timestamp-based loop to see velocity converted into a frame-specific distance before the CSS transform is updated. section 12.2.1
Velocity is also the middle layer of a simple motion model: acceleration changes velocity, then velocity changes position. Updating velocity before position lets an element speed up or slow down over time. In a screen coordinate system where y increases downward, adding positive gravity to vertical velocity makes an object fall. On collision, reverse the relevant velocity component and reduce its magnitude to create a bounce that loses energy. section 12.2.2 section 12.3
Common UI uses treat velocity as a state that forces modify each frame:
- For spring motion, add acceleration derived from displacement toward a target, then damp velocity so overshooting motion settles. section 12.4.1
- For drag and swipe inertia, retain horizontal and vertical velocity when release occurs, then multiply each by friction below 1 until movement stops. section 12.4.2
- For particle effects, give each item velocity components, update its position, and reverse or reduce components at floor and wall collisions. section 14.2.1
- For a depth illusion, assign closer canvas stars higher horizontal speed and larger apparent size than distant stars. section 14.2.2
Confetti with vertical and horizontal velocity
A confetti burst can give every canvas rectangle random vx and vy values. Each update adds gravity to vy, multiplies vx by a drag-derived factor, then adds vx and vy to x and y. Initially negative vertical velocity sends pieces upward; once gravity makes vy positive, they fall. The independent horizontal velocity gradually fades, producing a scattered but controlled celebration. section 14.2.3
Check signs and damping values when motion behaves unexpectedly. A negative horizontal velocity moves a box left rather than right. Multiplying velocity by 1 leaves it unchanged, so damping must be less than 1 to slow an element. Increasing spring stiffness creates stronger acceleration and can make an animation reach and overshoot its target faster. section 12.5
Practical takeaway: store position and velocity separately, use elapsed time when consistent real-time speed matters, and modify velocity—not position directly—when modeling acceleration, gravity, collision response, springs, or friction. section 12.2.1 section 12.6
