Snap to slide section with animations


I am working on a project, where I am trying to make the effect of zooming out when scrolling down.
I have used webflow’s built-in animations and achieved a pretty good result, which mimics the zoom out animations. Please see this read-only link below:

To make this complete, I need to know how to use snap-to scroll animation like the link below:

The challenge I have - once I use snap to scroll and use additional css (code below), I can no longer use divs which have position fixed - it breaks the layout. How can I achieve the first example animations, but instead of having a continous scroll it would snap to section like in the example below?

.scroll-snap-wrapper { scroll-snap-type: y mandatory; } .sec-1 { scroll-snap-align: center; } .sec-2 { scroll-snap-align: center; } .sec-3 { scroll-snap-align: center; } .scroll-snap-wrapper { -ms-overflow-style: none; scrollbar-width: none; } .scroll-snap-wrapper::-webkit-scrollbar { display: none; }

Live examples are below: