Create this unique text stroke effect on scroll:

See it in action
While working at Wix Studio I created this section to show the “power of CSS”:

The "trick"
The trick is using an image “sandwiched” between 2 headings.
- One “regular” heading at the bottom
- A small image above it
- And a “fake” heading with text stroke and transparent color.
So when scrolling the “fake” heading hides the “real” heading, and that’s how this effect works.

Step by step instructions for Webflow
I am using Relume's Client First library for the structure, but it's optional.
List of layers
The section has to be very tall and centered to achieve the effect.

Main Section
- Section name: section_full-height-center
- Display: Flex
- Align: Center / Center
- Spacing: Margin left and right on Auto
- Size: Min. height of 220 VH

Padding sections
- Layer name: padding-global
- Padding: Left/Right 5%

- Layer name: container-large
- Margin: left/right Auto
- Width: 100%
- Max width: 80 REM (optional)

- Layer name: padding-section-small
- Padding: Top/Bottom 3 REM
- Position: Relative (this one is important)

The "real" heading
The "real" heading has to be fixed to the screen. The "fake" one will scroll past it.
Positon: Fixed to center

The image
The image will centered to the screen.
- Dislay: Flex
- Align: Center / Center
- Margin left/right Auto

The "fake" heading
This is one will have most of settings. It has to have a higher z-index, text stroke and transparent color.
- Position: Fixed to center
- Z-Index: 2 (anything higher than the heading)
- Text Stroke: 2px and black (or any color that matches the "real" hading)
- Transform: Y axis at 50%
- Custom properties: color with the value of transparent
- Under Settings set a custom attribute of aria-hidden of true





Final thoughts
Sometimes unique effects require some work, but that what makes them special.
This can be applied to both Webflow, Elementor or any other pager builder.