Hello,
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:
https://preview.webflow.com/preview/dissect---scroll-snap?utm_medium=preview_link&utm_source=designer&utm_content=dissect---scroll-snap&preview=ed2ab5856d82417dd520ccde1b7752f2&workflow=preview
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:
https://dissect---scroll-snap.webflow.io/
https://dissect---scroll-snap.webflow.io/scroll-2