Website
Overlapping Layout in Framer
Created by
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.
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.
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.
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.
