Command Palette

Search for a command to run...

Hectal

Web Animation · roadmap

The storyboard

Twenty panels, one per scene, in the order you learn them. Each panel loops a tiny version of its idea. Read left to right, top to bottom: every scene uses only what came before it.

20 scenes127 shots~48 h

Beginnerscenes 00–04

  1. F00Start 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.6 shots5 dailies ~2 h
    0/6 · 0%
  2. F01How 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.6 shots4 dailies ~2 h
    0/6 · 0%
  3. F02Purpose 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.6 shots5 dailies ~2 h
    0/6 · 0%
  4. F03CSS 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.6 shots4 dailies ~2 h
    0/6 · 0%
  5. F04Transforms 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.6 shots5 dailies ~2 h
    0/6 · 0%

Intermediatescenes 05–13

  1. F05Easing 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.6 shots4 dailies ~2 h
    0/6 · 0%
  2. F06PerformanceHow 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.7 shots4 dailies ~2 h
    0/7 · 0%
  3. F07Accessibility 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.7 shots4 dailies ~3 h
    0/7 · 0%
  4. F08JavaScript AnimationDrive motion from code: a shared requestAnimationFrame loop, then the Web Animations API in depth: playback, keeping the end state, promises, getAnimations and composite.6 shots4 dailies ~3 h
    0/6 · 0%
  5. F09Springs 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.7 shots4 dailies ~3 h
    0/7 · 0%
  6. F10Layout 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.6 shots5 dailies ~2 h
    0/6 · 0%
  7. F11View 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.7 shots4 dailies ~2 h
    0/7 · 0%
  8. F12Scroll-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.7 shots5 dailies ~3 h
    0/7 · 0%
  9. F13SVG 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.6 shots5 dailies ~2 h
    0/6 · 0%

Advancedscenes 14–19

  1. F14GSAPGSAP for sequencing: tweens, labelled timelines, ScrollTrigger, Flip and SplitText, matchMedia for reduced motion, cleanup, useGSAP, and the launch-day hero timeline.7 shots4 dailies ~3 h
    0/7 · 0%
  2. F15Motion 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.7 shots4 dailies ~2 h
    0/7 · 0%
  3. F16Designer-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.6 shots4 dailies ~2 h
    0/6 · 0%
  4. F17Creative MotionCanvas loops, particles, seeded noise, accessible pointer effects and @property: the playful end of web motion, measured, capped and kind to reduced-motion users.6 shots4 dailies ~3 h
    0/6 · 0%
  5. F18Motion 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.6 shots4 dailies ~2 h
    0/6 · 0%
  6. F19Interviews 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.6 shots4 dailies ~2 h
    0/6 · 0%