Website
Negative Gap in Framer (Without Code)
This is an example project in Framer, that showcases how you can set up a structure that allows you to have "negative gap" in your stack. Feel free to remix the project to see how it's built or watch the tutorial to learn more.
Created by
About the resource
Unfortunately, in Framer, you can't set a negative gap on stacks to make elements overlap.
But what if you still want overlapping elements?
Well, you can use absolute positioning and manually place each frame so they overlap. However, this has a big drawback: it's not responsive. If you remove an element from the row, the others stay in place, and you have to manually reposition them.
It would be great to find a way to use relative positioning, so the layout stays responsive when we remove elements, add new ones, or simply reorder them with arrow keys.
About the resource
Unfortunately, in Framer, you can't set a negative gap on stacks to make elements overlap.
But what if you still want overlapping elements?
Well, you can use absolute positioning and manually place each frame so they overlap. However, this has a big drawback: it's not responsive. If you remove an element from the row, the others stay in place, and you have to manually reposition them.
It would be great to find a way to use relative positioning, so the layout stays responsive when we remove elements, add new ones, or simply reorder them with arrow keys.
About the resource
Unfortunately, in Framer, you can't set a negative gap on stacks to make elements overlap.
But what if you still want overlapping elements?
Well, you can use absolute positioning and manually place each frame so they overlap. However, this has a big drawback: it's not responsive. If you remove an element from the row, the others stay in place, and you have to manually reposition them.
It would be great to find a way to use relative positioning, so the layout stays responsive when we remove elements, add new ones, or simply reorder them with arrow keys.
Overlapping profile images with absolute positioning aren't responsive.
Overlapping profile images with absolute positioning aren't responsive.
Overlapping profile images with absolute positioning aren't responsive.
The good news is we can create a structure that allows us to have overlapping items within a stack while keeping them fully responsive.
All we need to do is wrap each item in a frame (by selecting them and pressing CMD + ENTER) and then set the wrapping frame's width to 1px. Make sure to unpin the wrapped element before changing the wrapping frame's width to ensure it doesn't change size.
Also, to avoid clipping, ensure that most parent frames are set to overflow visible.
The good news is we can create a structure that allows us to have overlapping items within a stack while keeping them fully responsive.
All we need to do is wrap each item in a frame (by selecting them and pressing CMD + ENTER) and then set the wrapping frame's width to 1px. Make sure to unpin the wrapped element before changing the wrapping frame's width to ensure it doesn't change size.
Also, to avoid clipping, ensure that most parent frames are set to overflow visible.
The good news is we can create a structure that allows us to have overlapping items within a stack while keeping them fully responsive.
All we need to do is wrap each item in a frame (by selecting them and pressing CMD + ENTER) and then set the wrapping frame's width to 1px. Make sure to unpin the wrapped element before changing the wrapping frame's width to ensure it doesn't change size.
Also, to avoid clipping, ensure that most parent frames are set to overflow visible.
With this structure, we can keep all elements in relative positioning, so they stay nicely responsive.
With this structure, we can keep all elements in relative positioning, so they stay nicely responsive.
With this structure, we can keep all elements in relative positioning, so they stay nicely responsive.
