Project 28: Dashboard Sidebar

CSS Stylist

Builds on these lessons

Perf Rendering Pipeline Perf Reflow Repaint Perf Gpu Acceleration Perf Critical Css Perf Removing Unused Css Perf Optimization

Step 1 of 2

Project

Collapsing the Sidebar on the Compositor

Give .sidebar a transition on transform, and .sidebar--collapsed a transform: translateX(-100%). Animating transform runs on the GPU compositor, skipping layout and paint entirely — animating width or left to achieve the same visual effect would force the browser to recompute the whole page's layout on every single frame.

🎯 Your Task

Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!

.sidebar {
  width: 260px;
  transition: transform 0.25s ease;
}

.sidebar--collapsed {
  transform: translateX(-100%);
}

← Previous Next →