Web Animation · the motion desk · CSS, WAAPI, springs, View Transitions, GSAP 3.15, Motion 14
Make the web move, on purpose.
Start from what a frame is and end with a launch page whose motion is fast on a cheap phone, calm for people who need less motion, tested and measured. You need some HTML, CSS and JavaScript; every other word is explained where it first appears, and the first examples run on this page with nothing to install. Each phase gives one part of the Lumen Volt launch page its motion: CSS transitions and keyframes, easing and its maths, performance measured, motion safety, the Web Animations API, springs, FLIP layout animation, View Transitions, scroll-driven animation, SVG, then GSAP, Motion for React, Lottie and canvas, and the production work most courses skip: tokens, tests and an audit. Under every example is a timeline that pauses, slows down and steps the page, and shows what each animation costs the browser.
Takes · what you can do at the end
- TAKE 01Explain how the browser draws motion frame by frame, and why some animations stay smooth while others stutter
- TAKE 02Build interface motion with CSS transitions, keyframes, easing curves and the Web Animations API, and choose durations and easings with taste
- TAKE 03Make motion safe and inclusive: reduced motion in CSS and JavaScript, the WCAG rules, pause controls, focus and screen readers
- TAKE 04Use springs, FLIP, View Transitions and scroll-driven animation to animate layout, pages and scrolling
- TAKE 05Ship with the industry's tools (GSAP with ScrollTrigger, Motion for React, Lottie, canvas) and know when each is worth its cost
- TAKE 06Measure, test and audit motion, and answer animation interview questions with a finished launch page to show
The X-sheet
An animator's exposure sheet lists every frame of a film in order. This one lists every scene of the course: what it teaches, how long it takes, and how far you are.
- F00Beginner~2 hStart Here: Motion, Your Tools and the PlanWhat 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.
- F01Beginner~2 hHow Motion WorksFrames, 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.
- F02Beginner~2 hPurpose and PrinciplesThe five jobs of interface motion, when not to animate, the principles that fit UI, durations by size and distance, and a motion spec for the launch site.
- F03Beginner~2 hCSS Transitions in DepthHow the browser creates, reverses, interrupts and cancels a CSS transition, what can and cannot be animated, and the events that report it. Then button and link feedback for the launch page.
- F04Beginner~2 hTransforms and Keyframe AnimationsMove, turn and scale things with transforms, then write multi-step animations with @keyframes: fill modes, steps(), composition, events, and the Lumen toast.
- F05Intermediate~2 hEasing and TimingWhy the same 400 ms can feel quick or lazy: easing curves, cubic-bezier() inside, linear() for bounces and springs, choosing a curve by job, and stagger, ending with the Lumen product grid reveal.
- F06Intermediate~2 hPerformanceHow the browser turns a change into pixels, what each property costs (measured in Chromium), layers, layout thrashing, measuring jank, and cheap phones: then fix the janky hero.
- F07Intermediate~3 hAccessibility and Motion SafetyWho motion hurts, prefers-reduced-motion in CSS and JavaScript, the WCAG motion rules, a site motion toggle, focus and screen readers, and the Lumen motion switch.
- F08Intermediate~3 hJavaScript AnimationDrive motion from code: a shared requestAnimationFrame loop, then the Web Animations API in depth: playback, keeping the end state, promises, getAnimations and composite.
- F09Intermediate~3 hSprings and PhysicsMotion that follows a rule instead of a recording: springs, damping, interruption, drag and throw, ending with a cart drawer you can fling shut.
- F10Intermediate~2 hLayout Animation and FLIPAnimate layout changes the cheap way: FLIP, lists that filter and reorder, enter and exit with CSS, height: auto, and one-line auto-animate, on the gallery and the specs.
- F11Intermediate~2 hView TransitionsLet the browser photograph the page before and after a change and animate between the two photos: snapshots, shared names, pseudo-elements, cross-page transitions, failures and fallbacks.
- F12Intermediate~3 hScroll-Driven and Scroll-Triggered AnimationLet the scroll bar drive an animation, or let scrolling start one: scroll() and view() timelines, ranges, named timelines, the JavaScript API, IntersectionObserver, Lenis, and a calm story section for the Volt.
- F13Intermediate~2 hSVG AnimationTurn, draw, follow and morph vector shapes: the transform-origin trap, line drawing, motion along a path, morphing, animated icons, and the logo and route of the launch page.
- F14Advanced~3 hGSAPGSAP for sequencing: tweens, labelled timelines, ScrollTrigger, Flip and SplitText, matchMedia for reduced motion, cleanup, useGSAP, and the launch-day hero timeline.
- F15Advanced~2 hMotion for ReactAnimate React with Motion: defaults, variants, exits with AnimatePresence, layout and shared-element animation, gestures, scroll, reduced motion, bundle size, and the Volt configurator.
- F16Advanced~2 hDesigner-Made AnimationPlay animation a designer drew: video, GIF, sprite sheet, Lottie or Rive, how to choose by measured size and cost, control a dotLottie player, and ship a headlight mascot that fails gracefully.
- F17Advanced~3 hCreative MotionCanvas loops, particles, seeded noise, accessible pointer effects and @property: the playful end of web motion, measured, capped and kind to reduced-motion users.
- F18Advanced~2 hMotion Systems in ProductionTurn one-off animations into a system: motion tokens, a design-system spec, the right tool for the job, tests that run animations, and field monitoring.
- F19Advanced~2 hInterviews and CapstoneAnswer motion interview questions with measured facts, build a toast, an accordion and a modal live, find four bugs with the timeline, and pass a launch audit.
Every tool of web motion, on one dope sheet
Each row is a tool, each column a scene. A block marks where the course teaches it; click a block to jump there.
Beginner: 00–04Intermediate: 05–13Advanced: 14–19
Cuts · pick the one for your goal
Beginner's cut
Complete beginner
You know some HTML, CSS and JavaScript and have never thought about motion. Start at scene 00: the first examples run on this page.
Job-ready cut
Job-ready interface motion
You build sites or apps and need motion that is quick, cheap and accessible, in CSS, the Web Animations API and React.
On every page
The Motion Timeline
Under every live example: pause the page, slow it to 0.1×, step one frame, scrub, and see each animation as a track with its cost. Motion is too fast to study by eye.
Feel it
The same interface built two ways. Play both, choose the one that feels better, then read why. Taste is trained before it is named.
Explainers you can touch
Drag an easing curve, tune a spring, step through FLIP, scrub a view transition, slide a scroll range. Every idea has a widget.
Dailies that check the motion
Exercises freeze the page's clock and check where things are at exact moments, what they cost, and how they behave with reduced motion.