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
- Wrap text and images in a tall section, placing the text in a sticky-positioned DIV set to 50vh top.
- Stack images vertically so they scroll normally while the text stays centered, then use scroll interactions to fade or move the text out as the scroll progresses.
To create a scroll-based animation in Webflow where text boxes stick in the center of the viewport while images scroll through and then the text scrolls out, you’ll need scroll interactions, combined with position: sticky and careful structuring.
1. Structure Your Section
- Wrap everything in a section (DIV block) tall enough to accommodate the scroll.
- Inside, add a container DIV that holds both:
- A text block you want to fix
- A column/list of images that scrolls up behind or next to the text
2. Apply Sticky Positioning to Text
- Select your text block and go to the Style panel.
- Under Position, choose Sticky.
- Set Top: 50vh (this positions it in the center of the viewport vertically).
- This ensures the text stays fixed in view until the parent section scrolls out.
3. Make Section Tall Enough
- Make sure the parent section is taller than the viewport to allow for scroll interaction.
- Example: Set the section’s height to 400vh or more, depending on the number/height of images.
4. Align the Images
- Place your images stacked vertically inside a DIV next to or behind the text.
- These should be in normal document flow, so they scroll up naturally while the text remains sticky.
5. Trigger Scroll Into View
- Go to the Interactions panel (Interactions > Page Scroll).
- Choose Scroll Into View trigger for the section or text.
- Add:
- Opacity = 0 → 100% as it scrolls in
- Optional fade or scale purely for styling
6. Scroll Out Effect
- Use the “While Page is Scrolling” interaction on the section or a wrapper DIV.
- Set a scroll progress from 0% to 100% (based on section).
- Animate the text’s opacity or position:
- At 80%+ progress, reduce opacity to 0 or move it upward to scroll out.
Summary
To achieve sticky-centered text with scrolling images in Webflow, use sticky positioning on the text, ensure the section is tall, and use scroll interactions for entry/exit effects. This creates the appearance of the text "hovering" while images scroll beneath, then fading or sliding away as the sequence ends.