Shots in this scene
What Web Animation Is
In one line
Web animation is a change on a page shown over a short time instead of all at once, so people see what happened, where things came from and what they can do next. Done well it is quick and quiet; done badly it is slow, distracting or makes people unwell.
Think of it like this
In a good restaurant a waiter carries your plate from the kitchen door to your table, and you see it coming. If plates simply appeared in front of people, everyone would jump, and nobody would be sure which plate was theirs. Motion on a web page does the waiter's job: it shows where something came from, where it went, and that something happened at all.
Words you'll meet
New words in this topic, in plain English. Come back here whenever one feels fuzzy.
- animation
- A change shown over a period of time as many small steps (frames), instead of all at once.
- frame
- One still picture on the screen. A screen shows a new frame about 60 times a second, and motion is a quick series of frames.
- transition
- In CSS, an animation the browser makes by itself when a property changes, from the old value to the new one.
- change blindness
- Not noticing a change that happens instantly, especially away from where you are looking.
- reduced motion
- A setting in every major operating system that asks apps and web pages to use less movement. Pages read it with
prefers-reduced-motion. - vestibular disorder
- A problem with the balance system in the inner ear. For some people, large movement on a screen causes dizziness or nausea.
Step by step
01A change happens
Click "Add to cart" on a page with no motion: the number goes from 0 to 1 in one frame. If you were looking at the button, you may not see it change at all.
Nothing is wrong with the code. The problem is human: the eye notices movement far better than a silent swap.
02Motion fills in the frames between
An animation shows the change in steps. The number grows a little, then settles, over about a quarter of a second: roughly 15 frames on a normal screen.
Your eye catches the movement and you know the click worked. That is feedback, the most common job of interface motion.
03You describe the change; the browser draws it
You rarely draw frames yourself. You say "go from here to there in 240 ms with this kind of speed curve", and the browser works out every frame in between.
In CSS that is one line, such as transition: transform 240ms ease-out. The rest of the course explains each part of that line, and what to do when one line is not enough.
04Every animation has a cost
Each frame is work for the browser, and each animation takes a little of the user's time and attention. A good animation is worth that cost; a decorative one is not.
Some properties are cheap to animate and some are expensive (Phase 6 measures them), and some people should see less motion (Phase 7). From the first example on, you will see both on the Motion Timeline.
Try it yourself
- 1
Click fast and watch the bump restart
In "Three jobs in one page", press Add to cart five times quickly. The number bumps on every click, because the code removes the class and adds it again (
void count.offsetWidthin between makes the browser notice the removal).Now press the timeline's 0.1× button and click again: the bump takes about 2.4 seconds, and you can see the number grow to 1.5 times its size and settle. The track on the timeline says
@keyframes · bumpand lasts 240 ms. - 2
See the attention pulse stop by itself
Press New message. The track says
×2: the animation runs two times (animation: pulse 600ms ease-out 2), then stops. A pulse that never stopped would keep pulling at the eye: that is why attention motion should end. - 3
Turn on reduced motion
Under "Does this browser ask for reduced motion?", switch on Reduced motion. The page runs again as if your system asked for less motion: the sentence now ends in
true, and the spinner stands still. The text "Loading the Volt…" still tells you what is happening, so nothing is lost. That is the pattern you will use all course: reduce the movement, keep the meaning.
Code & diagrams
Click each button. The number bumps (feedback), the panel grows out of its button (orientation), the dot pulses twice and stops (attention). Each motion lasts a quarter of a second or less, except the two pulses.
Nothing is moving yet. Hover, click or scroll the page: every animation it starts shows up here as a track.
Console
Nothing logged yet.Both buttons save a ride and show the same message. Press each one a few times. Which would you rather see 20 times a day?
A drops in from above and bounces (900 ms)
B rises a few pixels and fades in (220 ms)
The answer depends on your device's settings, so this example has no fixed output. Switch on "Reduced motion" under the preview to run it as someone who asked for less motion: the answer changes and the spinner stands still while the text stays.
Nothing is moving yet. Hover, click or scroll the page: every animation it starts shows up here as a track.
Console
Nothing logged yet.Break it on purpose
Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.
Break #1
Take out the line that restarts the bump
In "Three jobs in one page", delete the line void count.offsetWidth; // let the browser see the class go, so it can start again. Press Run, then click Add to cart three times.
Myth vs fact
Myth
More animation makes a site feel more premium.
Fact
Users judge quality by how quick and clear a site feels. Many large, slow animations make a product feel heavy. The products people call polished use a few short, purposeful ones.
Myth
Animation is decoration you add at the end.
Fact
Good interface motion carries information: what changed, where something came from, what to do next. It belongs in the design from the start, like layout and colour.
Pro corner
Extra depth for experienced readers. New to this? Skip it for now and come back later.
- ▸
void el.offsetWidthrestarts a CSS animation by forcing a synchronous style and layout of the page. On a big page with many elements that is a measurable cost (Phase 6, layout thrashing).el.getAnimations()and the Web Animations API (Phase 8) give you control without it. - ▸
Motion and perceived performance are linked: the same wait can feel shorter with a well-placed progress animation and longer with a slow, blocking one. Topic 1.5 shows the evidence and the rules (spinners only after a short delay).
- ▸
Large-area motion, parallax and zoom are the usual vestibular triggers; colour and opacity changes almost never are. That is why reduced-motion versions usually swap movement for a fade instead of removing feedback (Phase 7).
Remember this
- 1
The problem this solves: a web page changes in an instant. One frame the cart says 0, the next it says 1. Eyes are bad at noticing instant changes away from where they are looking (psychologists call this change blindness), so people miss confirmations, lose track of panels that open, and click twice. A short animation spreads the change over a fraction of a second, which the eye can follow.
- 2
Motion does jobs. Each good animation on a page does at least one of five jobs: feedback (your press worked), orientation (this panel came from that button, so it belongs to it), attention (look here, once), cause and effect (the item you added flew into the cart) and brand (a little character that makes the product feel like itself). Phase 2 goes deep on each. Motion with no job is decoration, and decoration costs the user's time and attention.
- 3
How motion is made on the web. There are five main ways, and this course teaches all of them, in this order: CSS transitions and keyframe animations (a few lines of CSS, the browser does the rest); the Web Animations API (the same engine, driven from JavaScript, in about 97% of browsers in use according to caniuse in October 2026); JavaScript libraries such as Motion (about 280 million npm downloads in the month to 22 October 2026, counting its two package names,
motionandframer-motion) and GSAP (about 22 million); designer-made files such as Lottie and Rive, which play animations drawn in design tools; and canvas, where your code draws every frame itself. - 4
Two kinds of motion. Product interfaces (shops, dashboards, apps) need quiet, fast motion: most of it under about 300 milliseconds, used for feedback and orientation, never in the way. Marketing and storytelling pages (a launch page's hero, a scroll story) can be more expressive, because people came to look. The Lumen Volt page has both, so you will learn when each is right.
- 5
When motion hurts. Motion that makes people wait (a 1-second menu they open 50 times a day) wastes time. Motion that drops frames looks broken and drains phone batteries. And for people with vestibular disorders (problems with the inner ear's balance system), large moving areas, zooms and parallax can cause dizziness and nausea. Every operating system has a reduced motion setting for them, and pages can read it. In this course every animation you build has a calm version.
- 6
What you need to start. Some HTML, CSS and JavaScript: you should know what an element, a class and an event listener are. Every other word is explained where it first appears. Everything runs on this page; nothing is installed until Topic 0.4.
Explain it without notes
Why does a page with no animation make people miss changes?
Name the five jobs interface motion can do, with one example each.
What is the difference between motion in a product interface and on a marketing page?
Practice
Look at two apps you use every day. Find three animations in each and name the job each one does. Is any of them only decoration?
Turn on your operating system's reduced motion setting, then open three sites you use. Which ones change? Which ones ignore the setting?
Done when you can
You can say what an animation is in terms of frames
You can name the five jobs of interface motion with an example of each
You can name the five ways motion is made on the web
You can explain why some people need reduced motion, and where they switch it on