Split Focus Features
The left column pins with a step list while the right column scrolls specimens; the active step highlights as its specimen crosses the viewport midline.
- Difficulty
- Advanced
- Credits saved
- ~160
- Access
- Members
Technique
position: sticky on the left column, IntersectionObserver with a -50% 0px -50% 0px rootMargin on each specimen to detect the midline crossing.
Choreography spec
sticky column for the height of the specimen stack
- per specimenmidline crossing promotes its step
- step changeold step dims to 40%, new step warms, 320ms
Reversibility
Observer fires on both directions of travel.
Reduced motion
Steps and specimens interleave in a single column.
Build a "split-focus-features" section for my landing page. TECHNIQUE position: sticky on the left column, IntersectionObserver with a -50% 0px -50% 0px rootMargin on each specimen to detect the midline crossing. SPEC ██████████████████████████████████████████████ ██████████████████████████████████████ ████████████████████████████████████████████████████ RULES ████████████████████████████████████████████ ██████████████████████████████████████████████████
Full prompt unlocks with membership.
Split focus features
Four rules, one sticky column.
- 01
Pin the page
A tall wrapper and a sticky stage. The wheel stops moving the document and starts moving the scene.
- 02
Derive every value
No animation state. Position in the wrapper is the only input, so scrubbing back rewinds exactly.
- 03
Hold before you label
Motion settles completely before type resolves. Labels that move while you read them feel cheap.
- 04
Release cleanly
The pin ends where the wrapper ends. The user never feels trapped in the section.
01
02
03
04