Experiments >

Code animation: Layout adjustments

Experiment #15525th April, 2021by Joshua Nussbaum

In a past experiment, I added resizing to the layout.

When I integrated it into the project, it behaved weirdly when the timeline’s height get taller, the header goes off screen. So this experiment revists the layout to fix the problems with it.


The outer layout uses flexbox. So adjusting one part - like increasing the height of the timeline/footer - impacts the expansion of other areas.


Use a fixed layout position: fixed for the header, sidebar and footer. Only the <main> content should use flexbox.

  • The footer and sidebar’s size should be adjustable.
  • Sidebar should be hidden unless selected.
  • Animate the sidebar when it becomes visible (slide-in).
  • Sidebar should not overlay the header or footer. It’s height should be dynamically calculated.




view all experiments

Stay tuned in

Learn how to add more experimentation to your workflow