Command Palette

Search for a command to run...

Hectal
Scene
01
Take
01
Level
Beginner
Runtime
~2 h

How Motion Works

Frames, interpolation, time-based loops and the browser's frame pipeline, so you can say why motion looks smooth or jerky. Build: a loading bar that keeps time.

6 shots16 live examples4 dailies
0/6 · 0%

Before any technique, you need a picture of what motion is. This phase gives it to you. A screen shows still pictures, one after another. The browser has a few milliseconds to make each one. An animation is a value that travels from a start to an end as time passes.

You learn what a frame and a frame budget are, how the in-between values are worked out, and why every JavaScript animation must read the clock and never count frames. You see what the browser does in each frame, and why a transform animation survives a busy page while a left animation does not. You also learn how people judge speed, and how to give feedback while they wait.

You build the first piece of the Lumen Volt launch page: loop.js, a small time-based tween, and a loading bar that tracks the real page load and lasts the same time on a 30, 60 or 120 Hz screen.

▶ Roll: 1.1

Scene 01 · the brief from Lumen

Lena, QA at Lumen Bikes, testing on a cheap Android phone and a 120 Hz iPhone

“The loading bar finishes in one second on the office laptop. On my iPhone it is over before I look. On the cheap phone in power-saving mode it takes forever. Which one is the real timing?”

Kofi, the frontend engineer, wrote a first loading bar for the Volt launch page. It moves a few pixels on every frame, and on his 60 Hz laptop it takes exactly the second Ama asked for. Lena tests it on her two phones. On the 120 Hz iPhone the bar ends in half a second. On the cheap Android phone, in power-saving mode, it takes about two.

Nobody had chosen those timings. The screens had. Mei, the motion designer, wants the bar to take one second everywhere. Tomás, the founder, only wants a page that feels fast, and asks why a loading bar is needed at all if the page loads quickly.

In this phase the team learns what a frame is, how the browser makes one, and why motion must follow the clock. By the end the bar lasts what the designers agreed on every screen, it tracks the real load, and the launch page has its first helper, loop.js.

In this scene

You will learn

  • Say what a frame, a refresh rate and a frame budget are, and what a dropped frame looks like
  • Work out in-between values with lerp, and say why height: auto does not animate
  • Write a time-based loop that lasts the same time on any screen
  • Say what the browser does in each frame and which animations a busy page cannot stop
  • Give feedback while people wait: acknowledge, delay the spinner, show every state

You write code in

In the editor on this page (no install); the build adds to your lumen-motion project

Files you touch

  • src/js/motion/loop.js
  • index.html
  • src/styles/components.css
  • src/js/main.js

Shot list · 6 shots, widths by reading time

1.11.21.31.41.51.6
  1. 1.1Frames and the FlipbookA screen never shows motion. It shows still pictures, one after another, so fast that your eye joins them up. How many pictures there are each second, and how long the browser has to make each one, decides whether motion looks smooth or jerky. 20 min 2 live
  2. 1.2Interpolation: the In-BetweenInterpolation means working out the values between a start and an end. Every animation on the web is one value, such as a position, an opacity or a colour, moving from one number to another as a progress number goes from 0 to 1. 22 min 3 live
  3. 1.3Time, Not FramesA JavaScript animation must ask the clock how far along it is, never count its own frames. A loop that counts frames runs at the speed of each user's screen. A loop that reads the time takes the same duration on every screen, and only gets smoother on faster ones. 22 min 2 live
  4. 1.4What the Browser Does Each FrameTo make one frame the browser runs your scripts, works out styles, lays the page out, paints it and composites the layers. One main thread does most of that, one at a time, while a second thread, the compositor, can keep already-painted layers moving. That split decides which animations stay smooth when the page is busy. 23 min 3 live
  5. 1.5Perceived Speed and Response TimePeople judge speed by what they feel, not by a stopwatch. Feedback within about 100 ms feels instant, a spinner that flashes for 100 ms feels like a glitch, and a screen that gives no sign of life for a second feels broken. Motion decides which of these a user gets. 24 min 4 live
  6. 1.6Build: A Loading Bar That Keeps TimebuildWrite src/js/motion/loop.js, a small time-based tween helper, and use it for a "Loading the Volt" bar on the launch page. The bar lasts the same time at 30, 60 and 120 Hz and ends exactly when the page has loaded. 29 min 2 live

Dailies · 4 checked exercises

A film crew watches the day's shots every evening. Build each one yourself and press Check: the page freezes its clock and checks your motion at exact moments, its cost, and its reduced-motion version.

D01Fix the lerpThe slider should move the box from 40 px (slider at 0) to 240 px (slider at 100). At the middle it should be at 140 px, but it is not.BeginnerD02Make it keep timeThe dot should move 240 px to the right in 800 ms and stop exactly there, on every screen. The starter counts frames (3 px per frame), so it is wrong.BeginnerD03Spinner only when lateA fast request takes 100 ms and a slow one 900 ms. The starter shows the spinner immediately for both, so a fast answer makes it flash.BeginnerD04Write the tween (launch page)Write tween({ from, to, duration, onUpdate, onDone }) as Phase 1's loop.js does. It must be time-based, call onUpdate with the value on each frame, end exactly on to, call onDone once at the end, and return { cancel() }.Beginner