Overlapping Layout in Framer

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Website

Overlapping Layout in Framer

This is an overlapping layout created in Framer, based on the Headfound website. I got a question in Twitter DMs about how to make this layout in Framer without any code, in a way that it stays responsive on different breakpoints. So, I put together this little demo with a mini tutorial.

image of Nandi Muzsik

Created by

Overlapping Layout in Framer
Overlapping Layout in Framer
Overlapping Layout in Framer

Related Lesson

Related Lesson

Related Lesson

About the resource

I'm happy to tell you that the trick here isn't anything too crazy. What I do is basically handle the image and the elements below it as two different sections. The image on top is the first section, and then the text box and the team members part make up the second section.

These two sections are nicely placed below each other in a stack. Normally, the top of the text box would start where the image ends. So the bottom of the image would line up with the top of the box. And HERE's the little trick we implement.

We trick Framer into thinking that the top section is smaller. We do this by wrapping the image in another frame and making that smaller than the image. We also make sure that the overflow is set to visible, so the image can nicely overflow as we make the wrapping frame smaller.

About the resource

I'm happy to tell you that the trick here isn't anything too crazy. What I do is basically handle the image and the elements below it as two different sections. The image on top is the first section, and then the text box and the team members part make up the second section.

These two sections are nicely placed below each other in a stack. Normally, the top of the text box would start where the image ends. So the bottom of the image would line up with the top of the box. And HERE's the little trick we implement.

We trick Framer into thinking that the top section is smaller. We do this by wrapping the image in another frame and making that smaller than the image. We also make sure that the overflow is set to visible, so the image can nicely overflow as we make the wrapping frame smaller.

About the resource

I'm happy to tell you that the trick here isn't anything too crazy. What I do is basically handle the image and the elements below it as two different sections. The image on top is the first section, and then the text box and the team members part make up the second section.

These two sections are nicely placed below each other in a stack. Normally, the top of the text box would start where the image ends. So the bottom of the image would line up with the top of the box. And HERE's the little trick we implement.

We trick Framer into thinking that the top section is smaller. We do this by wrapping the image in another frame and making that smaller than the image. We also make sure that the overflow is set to visible, so the image can nicely overflow as we make the wrapping frame smaller.

the structure of the overlapping layout

You can see that the frame that wraps the image (blue) is smaller than the image within it (purple), so the text box moves up and overlaps the image.

the structure of the overlapping layout

You can see that the frame that wraps the image (blue) is smaller than the image within it (purple), so the text box moves up and overlaps the image.

the structure of the overlapping layout

You can see that the frame that wraps the image (blue) is smaller than the image within it (purple), so the text box moves up and overlaps the image.

So now, as you can see in the image above, the background image within section one will nicely overflow to behind the box, as the box starts moving up, lining up with the first section.

If this technique confuses you, or it's not super clear, you probably need to try it yourself, or watch this tutorial where I show step-by-step how I created it. Also, I recommend checking out this negative gap demo I created a while ago using the same technique.

So now, as you can see in the image above, the background image within section one will nicely overflow to behind the box, as the box starts moving up, lining up with the first section.

If this technique confuses you, or it's not super clear, you probably need to try it yourself, or watch this tutorial where I show step-by-step how I created it. Also, I recommend checking out this negative gap demo I created a while ago using the same technique.

So now, as you can see in the image above, the background image within section one will nicely overflow to behind the box, as the box starts moving up, lining up with the first section.

If this technique confuses you, or it's not super clear, you probably need to try it yourself, or watch this tutorial where I show step-by-step how I created it. Also, I recommend checking out this negative gap demo I created a while ago using the same technique.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • Draggable Freeform Canvas Website in Framer

    Draggable Freeform Canvas Website in Framer

    Website

    Draggable Freeform Canvas Website in Framer

    Draggable Freeform Canvas Website in Framer

    Website

    Draggable Freeform Canvas Website in Framer

    Draggable Freeform Canvas Website in Framer

    Website

  • Circular Animated Hero Section in Framer

    Circular Animated Hero Section in Framer

    Website

    Circular Animated Hero Section in Framer

    Circular Animated Hero Section in Framer

    Website

    Circular Animated Hero Section in Framer

    Circular Animated Hero Section in Framer

    Website