Command Palette

Search for a command to run...

Hectal
Scene
00
Take
01
Level
Beginner
Runtime
~2 h

Start Here: Motion, Your Tools and the Plan

What web animation is for, what you will learn and get, where you write code (this page, then your computer), the Motion Timeline, and the launch page you will bring to life.

6 shots10 live examples5 dailies
0/6 · 0%

This phase is your map and your tools. Before any technique you find out what motion on a web page is for (and when it does harm), what the whole course teaches, what you can build at the end, and exactly where you will type your code: first in the editor on this page, then in a small project on your own computer.

You also meet the tool you will use in every topic: the Motion Timeline under each live example. It pauses the page, slows it to a tenth of its speed, steps one frame at a time, and shows every animation as a track, coloured by how much work it costs the browser. Motion is too fast to study with the naked eye; the timeline lets you see it.

At the end you start the project you will grow for the whole course, the Lumen Volt launch page: a complete, working page with no motion at all. Every later phase gives one part of it motion, the way a real team would, until the page feels alive, stays fast on a cheap phone, and is calm for people who ask for less motion.

▶ Roll: 0.1

Scene 00 · the brief from Lumen

Ama, head of design at Lumen Bikes

“The Volt page works, but it feels dead. I want it alive but calm: motion that helps, never motion that shows off.”

Lumen Bikes rents bikes from 25 stations across Ardenvale, and in six weeks it launches its first e-bike, the Lumen Volt. Kofi, the frontend engineer, has built the launch page. Everything works: you can add accessories, filter the gallery, read the specs and reserve a bike.

But in testing, people missed things. Lena, from QA, watched a tester press "Add" three times because the cart count changed too quietly to notice. Another tester filtered the gallery and thought the photos had vanished. Ama wants motion that fixes this. Mei, the motion designer, has already started a storyboard.

Ravi, who tests accessibility, adds one rule before anyone writes a line: he has a vestibular disorder, and big moving areas make him dizzy. Whatever the team adds must stay calm when his phone asks for reduced motion. In this phase you set up your tools and build the still page that everything else will move.

In this scene

You will learn

  • Say what motion on a web page is for, and when it does harm
  • Say what this course teaches, in order, and what you can build when you finish
  • Use the editor and the Motion Timeline: pause, slow down, step and read an animation's track
  • Set up a Vite project on your own computer and find the Animations panel in DevTools
  • Start the lumen-motion project with the still launch page

You write code in

In the editor on this page first; from Topic 0.4, also in your own lumen-motion project (Node.js and a code editor)

Files you touch

  • index.html
  • src/styles/base.css
  • src/styles/components.css
  • src/js/main.js

Shot list · 6 shots, widths by reading time

0.10.20.30.40.50.6
  1. 0.1What Web Animation IsWeb 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. 22 min 3 live
  2. 0.2What You Will Learn and What You GetThe course goes from what a frame is to shipping a fast, accessible motion system: CSS first, then performance and accessibility, then JavaScript, physics, layout, scroll and SVG motion, then GSAP, Motion and designer files, then production. You finish with a launch page you can show in an interview. 18 min 1 live
  3. 0.3The Editor and the Motion TimelineEvery live example has an editor, a viewfinder that shows the page, and the Motion Timeline under it. The timeline can pause the page, slow it down, step one frame at a time and scrub, and it shows every running animation as a track coloured by its cost. 22 min 2 live
  4. 0.4Animating on Your Own ComputerTo build the launch page you need Node.js 24 LTS, a terminal and a code editor. One command creates a Vite project, another starts it, and Chrome's DevTools give you an Animations panel and a Rendering tab to inspect motion on any page. 20 min 2 live
  5. 0.5The lumen-motion ProjectYou will build one project all course: the launch page of the Lumen Volt e-bike. It starts complete and still; each phase gives one part motion. Every file has a place in one folder layout that never changes. 19 min 1 live
  6. 0.6Build: The Still Launch PagebuildBuild the Lumen Volt launch page with no motion at all: header and cart, hero, accessories, gallery filter, specs and footer, in four files. It works fully, with JavaScript and without motion, so every later phase only adds motion. 22 min 1 live

Dailies · 5 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.

D01Slow it downThe box moves 200 px when you press the button, but the move is over in 200 ms, too fast to follow.BeginnerD02Fade the panel in and outThe Filters panel appears and disappears in one frame. Make it fade over 250 ms with ease-out, both when it opens and when it closes.BeginnerD03Respect reduced motionThe new-ride badge pulses forever. For people whose system asks for reduced motion, it must stand still, and stay visible.BeginnerD04Move it the cheap wayThis box moves by animating left, which makes the browser lay out the page on every frame (a red track on the timeline).BeginnerD05Count the cart (launch page)Part of the still launch page: make the Add buttons increase the cart count, and keep the cart button's label right for screen readers: Cart, 1 item, Cart, 2 items.Beginner