First I wish everyone whith a question had a sketch like yours (-:
This layout is possible to make in Webflow, but you’ll have to create every panel for every node. Depending on how many nodes you have, this can be tedious. As it involve interaction, what you want is being able to reuse the same interaction for every teaser. It means in the structure, the node panel must be a child or a sibling of the teaser, so the interaction can be limited to one teaser/node group.
So your rules:
the content must slide out when a teaser is clicked
the node must slide in when a teser is clicked, push main content away and taking over the whole page
reverse all of this when the close button on the node panel is clicked
must be able to scroll in both maincontent and panel
content in the maincontent and panel is centered
So, the main content must be all in one section in oder to slide out then in alltogether. In that section, there must be a container to constraint content within 940 pixels in the center of the page.
Down the structure of the main content, there must be a teaser DIV. Inside, or along this div, there must be a full-node DIV, that we’re going to make Fixed and hide to the side.
In the full-node div, there must be a container to constraint the content of the node within 940 pixels in the center.
There’s an issue: you can’t put container ion container… so the container inside the full-node panel must be recreated by hand : a DIV with 940px wide and centered.
Should work. Going to give this a try on my sandbox when I have some free time…