Streaming live at 10am (PST)

Panel with transitioneffekt

hi, i am new at webflow. i like to create a site with teaser which open a layer that slides in and out. see example link and screen.

my question is:

  • how can i built this layer, is this a section?
  • where do i position this element?
  • and how do i create a transition effect that makes the teaser page slides away?

Thanks, Shlomit

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…

hi vincent,

thanks for your answer. as i am a beginner in webflow and a designer not a developer, this sounds complicated for me. right now, i am struggling with building up a scrollable layer. what do you think is this tutorial a good start: Afterwards i would look at the animation options.


Well this tutorial involves Javascript, and if you’re starting with Webflow maybe you could avoid such tutorials, it adds a big chunk of complexity.

do you have a recommendation how to built a scrollable layer without javascript?

I am actually working on the layout you’ve described. It didn’t really work as I thought it would be… it’s a bit harder. I’m going to spend a couple more hours on it and will publish it. Stay tuned (:

But basically my “layer” is set to fixed and min-height 100%, that way it’s the full page at minimum but when there’s content in it, you can scroll.

Going to finish that now.

wow, thank you for your effort!