story-column fail

As the reader moves down a list of short points, the photo beside them fades to the photo that belongs to the point they are reading, so each point has its own picture without a pinned column.

Earns its place when: Three to five short points that each have their own photo, in one section that fits within about one and a half screens on desktop.

Never when: A section taller than about one and a half screens (the photo would scroll away from the points), points without their own photos, or any sticky or pinned column.

Measured: Fails on kmg-heating-plumbing, kettle-and-vine: lint: no new finding at 1440 or 393 (scripts on and off, reduced motion). rubric: no new finding at 1440 or 390 (13 with it, 13 without). checks failed: FAIL 1440: the photo follows the point in view: active 1,2. | lint: no new finding at 1440 or 393 (scripts on and off, reduced motion). rubric new: R9 no-overlap: text covered by another section at 390: "Change or cancel up to 2 hours before your table" under proof.

Not in the brief or the generator. It enters only if Ryan picks it.

KMG Heating & Plumbing (dark trade) fail

lint: no new finding at 1440 or 393 (scripts on and off, reduced motion). rubric: no new finding at 1440 or 390 (13 with it, 13 without). checks failed: FAIL 1440: the photo follows the point in view: active 1,2.

Open the live page with it on · the same page without it

Motion lint, new findings1440: none
390: none
Rubric (1440 and 390)13 findings with it, 13 without. New: none
Checks (scripts on, off, reduced motion)
  • ok 1440: no new opacity-hidden text at load (scripts on): on 0, off 0
  • ok 1440: no sideways overflow: scrollWidth 1440 vs 1440
  • ok 1440: the section fits in about one and a half screens: 0.81 screens
  • FAIL 1440: the photo follows the point in view: active 1,2
  • ok 1440: the active photo is fully shown: 1
  • ok 1440: scripts off shows the first photo and every point: {"first":1,"beatsVisible":true}
  • ok 1440: no new hidden text with scripts off: on 0, off 0
  • ok 390: no new opacity-hidden text at load (scripts on): on 0, off 0
  • ok 390: no sideways overflow: scrollWidth 390 vs 390
  • ok 390: each point carries its own photo and the stack is hidden: {"media":"none","imgs":3,"beats":3}
  • ok 390: scripts off shows the first photo and every point: {"first":1,"beatsVisible":true}
  • ok 390: no new hidden text with scripts off: on 0, off 0
Page height with it vs without: 1440 7406 vs 7384, 390 10094 vs 9594 (px)

Without it, then with it

Without it, 1440
Without it, 1440
With it, 1440
With it, 1440
Without it, 390
Without it, 390
With it, 390
With it, 390

The motion, 1440 wide

1440, frame 1
1440, frame 1
1440, frame 2
1440, frame 2
1440, frame 3
1440, frame 3
1440, frame 4
1440, frame 4

The motion, 390 wide

390, frame 1
390, frame 1
390, frame 2
390, frame 2
390, frame 3
390, frame 3
390, frame 4
390, frame 4

Kettle & Vine (restaurant) fail

lint: no new finding at 1440 or 393 (scripts on and off, reduced motion). rubric new: R9 no-overlap: text covered by another section at 390: "Change or cancel up to 2 hours before your table" under proof. checks failed: FAIL 1440: the photo follows the point in view: active 2.

Open the live page with it on · the same page without it

Motion lint, new findings1440: none
390: none
Rubric (1440 and 390)14 findings with it, 13 without. New: R9 no-overlap: text covered by another section at 390: "Change or cancel up to 2 hours before your table" under proof
Checks (scripts on, off, reduced motion)
  • ok 1440: no new opacity-hidden text at load (scripts on): on 39, off 39
  • ok 1440: no sideways overflow: scrollWidth 1440 vs 1440
  • ok 1440: the section fits in about one and a half screens: 0.78 screens
  • FAIL 1440: the photo follows the point in view: active 2
  • ok 1440: the active photo is fully shown: 1
  • ok 1440: scripts off shows the first photo and every point: {"first":1,"beatsVisible":true}
  • ok 1440: no new hidden text with scripts off: on 0, off 0
  • ok 390: no new opacity-hidden text at load (scripts on): on 39, off 39
  • ok 390: no sideways overflow: scrollWidth 390 vs 390
  • ok 390: each point carries its own photo and the stack is hidden: {"media":"none","imgs":3,"beats":3}
  • ok 390: scripts off shows the first photo and every point: {"first":1,"beatsVisible":true}
  • ok 390: no new hidden text with scripts off: on 0, off 0
Page height with it vs without: 1440 12187 vs 12187, 390 12060 vs 11692 (px)

Without it, then with it

Without it, 1440
Without it, 1440
With it, 1440
With it, 1440
Without it, 390
Without it, 390
With it, 390
With it, 390

The motion, 1440 wide

1440, frame 1
1440, frame 1
1440, frame 2
1440, frame 2
1440, frame 3
1440, frame 3
1440, frame 4
1440, frame 4

The motion, 390 wide

390, frame 1
390, frame 1
390, frame 2
390, frame 2
390, frame 3
390, frame 3
390, frame 4
390, frame 4

HELF Hardscaping not dropped

Not dropped: no run of short points with their own photos; its services already use the live crossfade.