Animated panel based design

Solution with CSS Grid

The solution in short

.panels-grid {
	// Use CSS Grid
	display: grid;
	// Set the columns
	grid-template-columns: auto 1fr auto;
	// Define the areas
	grid-template-areas:
		'side-panel main-panel annotation-panel';

	// Set the transition to the grid-template-columns (this is now possible)
	transition: grid-template-columns 0.2s;
}

// Based on some data. Could be a data-attribute, class etc.
.panels-grid[data-grid='visible-normal-hidden'] {
	// You do need to provide a fixed with. 
	// Tricks like calc-size(auto, size); (to have the contents of the panel determine the width) are not possible with grid.
	grid-template-columns: 20vw 1fr 0;
}

Conclusion

• Pro's
• Main panel is nicely animating along. Possible to use container queries to style the contents of that panel
• Animation feels smooth
• Con's
• You need to set fixed width to the panes for the panels. Not sure if that's nice
• You need to add another animation to the content of the right pane, otherwise the text will still be partly visible

Ensure the content from the panes can set the width of the panel

The solution in short

.panels-grid {
	// Create a flexbox layout
	display: flex;
}

.main-panel {
	// Have this panel take up the remaining space
	flex: 1;
}

.side-panel, annotation panel {
	// Ensure ist's not visible by default. Could also be display: none; with newer tech.
	width: 0;
	// Set the transition to the width. Still feels odd!
	transition: width ease-in-out 0.2s;
}

.side-panel[data-visible='true'], annotation panel[data-visible='true'] {
	// Set the width to the size of the contents (new CSS trick)!
	width: calc-size(auto, size);
}

Conclusion

This works, and with width: calc-size(auto, size);, the contents of the panel will determine the width of the panel. But, animating the width property is not something I want to do and it's also already showing some lack in the speed of the animation.