Checkpoint: Motion and Architecture

Question 1 of 5

• translate and opacity
• width and height
• top and left
• background-color and box-shadow

Question 2 of 5

• Set position: fixed on the header.
• Set z-index: 1000 on the header.
• Give the header view-transition-name: header and set animation: none on ::view-transition-group(header).
• Add will-change: transform to the header.

Question 3 of 5

• scroll(root) measures the viewport, not the document.
• The fill mode both makes the bar jump ahead.
• Scroll timelines always run at double speed in the middle.
• The ease timing curve maps scroll progress non-linearly; use linear so the bar tracks scroll distance exactly.

Question 4 of 5

• Use margin-top instead, for older browsers.
• Add !important so the margin survives other layouts.
• Move the margin into the utilities layer.
• Give the sidebar layout display: grid (or flex) with a gap, and keep the card free of outer margins.

Question 5 of 5

• The scrollbar jumps as sections render, because skipped sections have no height until they’re laid out.
• Off-screen sections disappear from find-in-page results.
• Nothing changes, because content-visibility only works with JavaScript.
• Every section renders twice, slowing the page down.