How can I create a scrolling effect where each full-browser sized section on my Webflow site "flips" to the next one, similar to Tumblr's website design?
TL;DR
- Set each section to 100vh and wrap them in a scrollable container (
scroll-wrapper) also set to 100vh. - Add custom CSS to enable
scroll-snap-type,scroll-snap-align, and optional smooth scroll behavior. - Hide default page scrolling by setting body overflow to hidden.
To replicate the full-screen scroll-flipping effect (similar to Tumblr's old design) in Webflow, you'll need to use full-height sections and a page scroll snap effect via custom code or workaround techniques.
1. Design Fullscreen Sections
- Set each section to 100vh in height so that it takes up the entire browser viewport.
- In Webflow Designer, select each section and set:
- Height: 100vh
- Overflow: Hidden (if necessary)
2. Wrap Sections in a Scrollable Container
- Create a parent div block (e.g., called
scroll-wrapper) and set: - Display setting: Block
- Overflow: Scroll or Auto
- Height: 100vh
- Nest all full-height sections inside this wrapper.
3. Enable Scroll Snap Using Custom CSS
Webflow doesn't support scroll snapping natively in the Designer, so you’ll need to add custom code via the Page Settings or inside an Embed element.
- Go to Page Settings > Custom Code > Inside
<head>and add the following CSS within a<style>element:
<style>
.scroll-wrapper {
scroll-snap-type: y mandatory;
overflow-y: scroll;
height: 100vh;
}
.scroll-wrapper > div {
scroll-snap-align: start;
height: 100vh;
}
</style>
- Make sure
scroll-wrappermatches the class name on your wrapper div, and each child section inside has 100vh height.
4. Disable Webflow’s Native Scroll
To ensure the default page scroll doesn’t interfere:
- On the Body, set:
- Overflow: Hidden
- This forces scrolling to occur only within the
.scroll-wrapper, giving better control.
5. Optional: Smooth Scroll Behavior
If you want smooth transitions between sections:
- Modify the CSS:
.scroll-wrapper {
scroll-behavior: smooth;
}
(This can be added inside the same <style> tag as above.)
Summary
To achieve a Tumblr-style section-flipping scroll effect in Webflow:
- Design each section to be 100vh.
- Wrap them in a scrollable container with
scroll-snap-type. - Add custom CSS for
scroll-snap-alignand optional smooth scrolling.
This creates a fluid, modern scroll experience where each section "snaps" into view as the user scrolls.
