- Scene
- 16
- Take
- 01
- Level
- Advanced
- Runtime
- ~2 h
Designer-Made Animation
Play 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.
Some motion is drawn, not coded: a character that waves, a logo that builds itself, a loader with a story. A designer makes it in a design tool and hands over a file. This phase teaches how to choose the file format (video, GIF, sprite sheet, Lottie, Rive), what each one costs in bytes and in the browser's work, and how to play and control it from your code.
You measure everything on the course's own mascot: file sizes from a real encode, the player's download, its time per frame. You control a dotLottie player (segments, speed, events, markers), read its real errors (a missing file, a file that is not Lottie, a WASM that will not load), and build the same state-machine idea that Rive uses with a small JavaScript machine. You see Rive's own API as code, not live, because Rive is not in this course's browser runtime.
At the end the Lumen launch page gets its headlight mascot: it waves once, blinks when you hover or focus it, sleeps when off screen, shows a still picture for reduced motion, and shows a plain shape when anything fails to load.
▶ Roll: 16.1Scene 16 · the brief from Lumen
Mei, motion designer at Lumen Bikes
“I drew a little headlight character that waves hello. Please do not turn it into a GIF: I want it sharp on every screen, small to download, and able to blink when someone points at it.”
Mei has made the Lumen headlight: a round lamp on a small stand that pops up, flicks its beam on and waves hello. She exported it as a Lottie file, and she has marked three stretches on its timeline: greet, blink and idle.
Kofi has been burned by this before. A previous project used a 2 MB GIF that kept running on a hidden tab, and a hero video with sound that the browser refused to start. He wants numbers first: how big is each choice, and what does it cost the phone?
Ravi has one condition, as always. With reduced motion on, the mascot must stand still, still friendly, and nothing on the page may break if the file fails to load. In this phase you choose the format by measuring, learn the player, and give the launch page a mascot that is kind to every visitor.
In this scene
You will learn
- Choose between video, GIF, sprite sheet, Lottie and Rive using measured size and cost, not habit
- Read what a Lottie file holds, and what a player silently ignores
- Control a dotLottie player: play, pause, segments, markers, speed, events and its real errors
- Build a state machine in JavaScript that drives animation segments, and read Rive's version of the idea
- Add the headlight mascot to the launch page, lazy loaded, with a poster frame and a fallback
You write code in
In your lumen-motion project (npm run dev) and in the editor on this page
Files you touch
- src/assets/mascot/headlight.lottie
- src/js/components/mascot.js
- index.html
- src/styles/components.css
- src/js/main.js
Shot list · 6 shots, widths by reading time
- 16.1Video, GIF, Sprite Sheet, Lottie or Rive?A designer's animation can reach the page as a video, a GIF, a sprite sheet, a Lottie file or a Rive file. Each trades file size, work for the browser, control from code, and accessibility. Measure before choosing. 22 min 2 live
- 16.2Lottie: Animation as JSONA Lottie file is a recipe: layers, shapes and keyframes written as JSON. A player redraws it every frame, so it stays sharp at any size. A
.lottiefile is the same recipe zipped. A player ignores what it cannot draw, without an error. 21 min 2 live - 16.3Playing and Controlling dotLottie
new DotLottie({ canvas, src })loads a file onto a canvas. Then you play named segments, change speed and loop, and listen for events. Bad input is mostly ignored quietly, and a file or WASM that cannot load firesloadError. 23 min 3 live - 16.4Rive and State MachinesRive files carry a state machine: states, inputs and transitions that decide how the animation reacts. The same idea is easy to build in JavaScript, with a table of states driving dotLottie segments. Rive's own API is shown here as code, not run. 21 min 2 live
- 16.5Loading, Size and Failure StatesA designer-made animation arrives late and can fail. Load the player only when the canvas is near the screen, show a still poster, handle
loadError, stop drawing off screen, and give reduced-motion visitors one still frame. 21 min 3 live - 16.6Build: The Headlight MascotbuildAdd Mei's headlight to the launch page. It waves once, blinks on hover and focus, sleeps off screen, shows a still poster for reduced motion, and shows a plain shape if anything fails to load. The player downloads only when the mascot is near the screen. 22 min 1 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.
loading… forever.IntermediateD03A still frame for reduced motionThe headlight always plays its greeting. For visitors who asked for reduced motion it must show frame 30 and never play.AdvancedD04Pause when scrolled awayThe mascot loops, even when it is scrolled out of the box. Pause it when it leaves the view and play it again when it returns.Advanced