How can I create a page in Webflow where text boxes scroll into view with images in the same div block, stop and become fixed in the middle of the viewport, and then scroll out of view once the images have been scrolled past?
TL;DR
- Use sticky positioning on centered text boxes within tall (150–200vh) scroll sections containing images and text.
- Apply Webflow scroll animations to control text visibility and motion while images scroll normally and text "sticks" during its section.
You're trying to create a scroll interaction in Webflow where text boxes become fixed (sticky) in the center of the screen while scrolling past images, then scroll out once the image content has passed. This effect is commonly referred to as scroll-sticky with reveal.
1. Structure Your Div Blocks
- Create a Section that acts as your scroll scene container.
- Inside the section, add a Div Block (Scene Wrapper) that will contain all the interactions.
- Nest multiple child Div Blocks (Scene Items) inside the wrapper. Each Scene Item should include:
- An Image Block
- A Text Box
2. Apply Position Styling
- Select the Text Box inside each Scene Item.
- Set the following styles:
- Position: Sticky
- Top: 50% (or adjust as needed for vertical centering)
- Optional: Transform Translate Y = -50% to truly center vertically
- This makes the text stay fixed in the viewport during scroll while it’s within its containing element.
3. Design Scroll Length
- For each Scene Item (parent div), ensure there's enough height to allow scrolling.
- Set Min Height to something large like 150vh–200vh so the sticky text has space to pin and then release.
4. Add Scroll Interaction in Webflow
- Go to Interactions Panel.
- Create a Page Scroll Animation or While Scrolling in View on each Scene Item.
- Target the Image and Text Box separately inside the interaction.
- Actions to include:
- Text Box: Keep opacity 100% and scale 1 while in middle, optionally animate in/out at start/end.
- Image: Animate in as user scrolls down (e.g., from opacity 0 to 100%) and/or parallax scroll.
5. Optional: Use Timed Scroll Animation
- For more granular control, attach a scroll animation to the Scene Wrapper.
- Add keyframes using "Scroll into view" and "Scroll out of view" triggers.
- Animate transforms (opacity, scale, position) for both text and image with precise offsets.
Summary
To achieve the scroll-sticky text box paired with images in Webflow:
- Use sticky positioning on the text boxes with a top offset of 50%.
- Ensure each section is tall enough for scroll to happen (150–200vh).
- Create scroll animations with Webflow Interactions to control visibility and motion.
- Images scroll normally, text boxes stay fixed while within their parent, then scroll out when the parent scrolls out.
This setup achieves the modern storytelling effect often seen in editorial sites and portfolio pages.
