- Scene
- 15
- Take
- 01
- Level
- Advanced
- Runtime
- ~2 h
Motion for React
Animate React with Motion: defaults, variants, exits with AnimatePresence, layout and shared-element animation, gestures, scroll, reduced motion, bundle size, and the Volt configurator.
React redraws the screen when state changes, so a state change normally means a jump. Motion (the library once named Framer Motion) lets you describe where a value should go and lets the library work out how: springs by default, exits that wait for the animation, layout changes that glide, shared elements that travel between places.
You read the tracks that Motion creates on the Motion Timeline, find which ones the browser runs on its own (WAAPI) and which Motion drives from JavaScript, and measure what each choice costs: delays, bundle size, and what reduced motion does to each kind of value. React Spring gets one honest section for comparison.
At the end the Lumen launch page gets a React island, the Volt configurator: colour swatches with a ring that glides, a price that counts, accessories that enter and leave, and a motion setting that follows Phase 7's rule.
▶ Roll: 15.1Scene 15 · the brief from Lumen
Tomás, founder of Lumen Bikes
“I want people to build their own Volt on the page, pick the colour, add a lock, and see the price. It has to feel like the bike is being made for them.”
Tomás wants a configurator on the launch page: three colours, six accessories, one live price. Kofi starts it in React, because the state (colour, chosen accessories, total) is exactly what React is good at. The first version works, and feels like a spreadsheet: the swatch ring jumps, the price flips, a removed accessory vanishes.
Mei sketches what she wants: the ring glides from swatch to swatch, accessories pop in and fade out, the price counts to its new total. Kofi knows the traps. CSS cannot animate an element that React has already removed, and animation code written by hand fights React's renders.
Ravi has the last rule, the same as always: with reduced motion nothing may fly or slide, but the page must still change clearly. In this phase you learn how Motion works inside React and build the configurator under that rule.
In this scene
You will learn
- Animate any React element with
motion.div, and read what Motion really runs (WAAPI or JavaScript) - Orchestrate groups with variants, and make removed elements leave with
AnimatePresence - Animate layout and shared elements with
layoutandlayoutId, and avoid scale distortion - Add gestures, scroll-linked values and reduced-motion rules, and weigh bundle size
You write code in
In your lumen-motion project (npm run dev) and in the editor on this page, now with React (src/react/)
Files you touch
- src/react/main.jsx
- src/react/Configurator.jsx
- index.html
- src/styles/components.css
- package.json
- vite.config.js
Shot list · 7 shots, widths by reading time
- 15.1The motion ComponentA
motion.divis a normal element that animates to whatever itsanimateprop says. Motion picks a spring for movement and a short tween for the rest, runs what it can through the browser's own animation engine, and drives the rest from JavaScript. 22 min 3 live - 15.2Variants and OrchestrationVariants give animation states names. A parent that switches to a named state tells every child to switch to the same name, so one prop drives a whole group, and
staggerChildren,delayChildrenandwhenset the order. 19 min 2 live - 15.3AnimatePresence and ExitsReact removes an element the moment it leaves the tree, so there is nothing left to animate.
AnimatePresencekeeps the element in the page until itsexitanimation ends, and itsmodedecides whether entering and leaving elements overlap. 23 min 3 live - 15.4Layout AnimationsAdd
layoutand Motion animates an element between two layouts using only transforms; addlayoutIdand an element can travel between two places. Transforms stretch content, so children and radii need the fixes in this topic. 20 min 2 live - 15.5Gestures and Scroll
whileHover,whileTap,whileFocusanddraganimate an element in response to input, anduseScrollturns a scroll position into a motion value you can map, smooth and bind to styles, all without React state. 20 min 2 live - 15.6MotionConfig, Reduced Motion, Vanilla animate and React SpringMotion ignores the reduced-motion setting unless you wrap it in
MotionConfig reducedMotion="user"; then movement turns instant while fades and colours still animate.LazyMotiontrims the bundle,animate()works without React, and React Spring is the physics-first alternative. 22 min 3 live - 15.7Build: The React Bike ConfiguratorbuildThe launch page gets a React island: colour swatches with a ring that glides, accessories that enter and leave, a price that counts, and one
MotionConfigthat follows the site's motion setting. 23 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.