Command Palette

Search for a command to run...

Hectal
Scene
10
Take
01
Level
Intermediate
Runtime
~2 h

Layout Animation and FLIP

Animate 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 shots13 live examples5 dailies
0/6 · 0%

Some changes cannot be tweened: a list is reordered, a filter hides half of a grid, a panel opens to "as tall as its content". The browser jumps to the new layout. This phase teaches the technique that fixes it, FLIP (First, Last, Invert, Play): measure, change the page, then play the difference with transform only.

You then build FLIP for whole lists, with items that leave and arrive, and learn where it distorts children. You meet the newer CSS that handles entry and exit (@starting-style, transition-behavior: allow-discrete, overlay) and the ways to animate to height: auto (interpolate-size, calc-size(), the grid trick, ::details-content). Last, you see what the one-line library auto-animate does, and where it stops.

At the end the Lumen Volt gallery filter slides the photos to their new places, removed photos fade out where they were, new ones fade in, and the specs open like drawers. All of it respects reduced motion.

▶ Roll: 10.1

Scene 10 · the brief from Lumen

Mei, motion designer at Lumen Bikes

“When someone filters the gallery, the photos should show where they went. And the specs should open like a drawer, not snap.”

In testing, a visitor pressed "Blue" in the gallery and said, "Where did the photos go?" Four photos vanished and two jumped to new places. Nothing told the eye what had happened. Mei had drawn the fix in her storyboard: the blue photos slide together, the others fade away where they were.

Kofi saw the catch at once. Layout changes cannot be animated directly, and a filter is a layout change. He needed to measure each photo, let the layout jump, and slide each photo from where it had been. The specs had the same trouble: the sections open to their natural height, and CSS would not animate that.

Lena added her two conditions. It must stay smooth on her cheap Android phone, so only transform and opacity. And Ravi's rule from Phase 7 still stands: with reduced motion nothing may travel. By the end of this phase the gallery and specs meet all of it.

In this scene

You will learn

  • Write FLIP by hand and as a reusable flip() function
  • Filter and reorder lists with leaving and arriving items, and handle interruption
  • Animate entry and exit with @starting-style and allow-discrete, and open panels to height: auto
  • Say what auto-animate does, and when to write your own

You write code in

In your lumen-motion project (npm run dev) and in the editor on this page

Files you touch

  • src/js/motion/flip.js
  • src/js/components/gallery.js
  • index.html
  • src/styles/components.css
  • src/js/main.js

Shot list · 6 shots, widths by reading time

10.110.210.310.410.510.6
  1. 10.1The FLIP TechniqueFLIP moves an element that jumped to a new place in the layout back to where it was with transform, then lets it slide home. You measure First, change the page to get Last, Invert the difference, and Play. 22 min 2 live
  2. 10.2Reordering and Filtering ListsFLIP for many items: read every box, change the list once, and animate only what moved. Items that leave fade out as copies, items that arrive fade in, and a child inside a resized box needs a counter-scale. 25 min 3 live
  3. 10.3Enter and Exit AnimationsAn element that appears has no "before" style to transition from, and one that is hidden with display: none is gone before it can fade. @starting-style gives the entry a start, and transition-behavior: allow-discrete keeps display (and overlay) on until the exit ends. 21 min 3 live
  4. 10.4Animating to height: autoCSS cannot blend a length with the keyword auto, so a panel that opens to its natural height snaps. interpolate-size: allow-keywords, calc-size() and the 0fr to 1fr grid trick fix that, and ::details-content makes <details> accordions animate. 19 min 2 live
  5. 10.5auto-animate in One Line, and Its LimitsautoAnimate(parent) watches a parent's children and animates adds, removes and moves with FLIP, in one line and about 3.3 kB gzipped. It is the right tool for simple lists, and you should know what it does not give you. 18 min 2 live
  6. 10.6Build: The Filterable GallerybuildAdd flip() and initGallery(): the colour filter slides the photos that stay, fades the ones that leave where they were, and fades in the ones that return. The specs open to their natural height, and reduced motion removes the travel. 34 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.

D01Slide the box homeThe button moves the box to the right end by changing the layout, and the box jumps.IntermediateD02Skip the cards that did not moveThe button swaps the first two cards. The FLIP code animates all six, although four did not move.IntermediateD03Fade in and fade outThe card appears and disappears at once, because it is hidden with display: none.IntermediateD04Open a panel to its natural heightThe panel opens to height: auto and snaps. Make it open in 300 ms.IntermediateD05A FLIP that respects reduced motionThe button reverses the cards with FLIP. For reduced-motion users no card may move: the order still changes, and nothing animates.Advanced