Eliminate spacing between sections without breaking scroll animation

[Tak (Tak Lee)]

I want to eliminate the spacing between sections. Currently, my page looks like this:

I want it to look like this:

However when I try to change the “sticky-wrapper” and “sticky-container” height to “Auto”, my animation breaks.

How can I get zero spacing without breaking my scroll animation?

---

Here is my public share link: Webflow - Copy of AMPD
(how to access public share link)

[Port_of_Folio]

You’ll need to change:
.sticky-center
.sticky-grid
Set the flex alignment to “top” on these to eliminate the space.
You’ll then need to change the sticky offset to accommodate the depth of your fixed navigation

[Tak (Tak Lee)]

Thank you so much for your help, this works for the top spacing. However, I still have spacing on the bottom to get rid of.

See the public share link for reference.

Any advice about this?

[Port_of_Folio]

There’s a lot I would do differently

1. I never use the larger breakpoints. I can achieve all of the design treatments using the base breakpoint. Adding the larger breaks does’t help you with this design and it actually ends up causing more headaches. My settings below are done from the base breakpoint.

2. I personally avoid using the Grid layout function unless it’s mandatory to achieve something, which is rare… usually with CMS collection items. Instead, I use Flexbox with percentages.

Change:
.sticky-container height=100vh
.sticky-center height=100%
.sticky-grid height=100%
.sticky-image_wrapper height=100%

.image26:

• Remove the 648 fixed pixel min/max height
• Change to width=100% height=100%
• Set the image fit to “cover” - this will fill the space but some cropping of your image will occur. I’ll usually adjust an image like this in Photoshop to accommodate cropping if it’s an issue.