Skip to content

feat: support arbitrary threshold values via intersect-[value] modifier - #16

Closed
andreas-fahrecker wants to merge 2 commits into
heidkaemper:mainfrom
andreas-fahrecker:arbitrary-modifiers
Closed

andreas-fahrecker wants to merge 2 commits into
heidkaemper:mainfrom
andreas-fahrecker:arbitrary-modifiers

Conversation

@andreas-fahrecker

Copy link
Copy Markdown
Contributor

Summary

Adds support for arbitrary intersection thresholds using Tailwind's
bracket syntax, e.g. intersect-[0.3], alongside the existing
intersect-half and intersect-full modifiers.

Motivation

Currently the only threshold options are intersect-half (0.5) and
intersect-full (0.99). Any other threshold requires forking the
Observer script. This PR lets users pick any threshold between 0 and 1
without touching JS, the same way Tailwind already handles arbitrary
values elsewhere (opacity-[0.3], top-[117px], etc.).

Changes

  • Observer script: _getThreshold() now falls back to parsing
    intersect-[<value>] off the element's class list when no named
    threshold (intersect-half / intersect-full) matches. Parsed
    values are clamped to [0, 1].
  • README: documents the new modifier under a "Custom threshold"
    section, next to intersect-half / intersect-full.

Backwards compatibility

Fully additive — intersect-half, intersect-full, and the default
Observer.start() behavior are unchanged. No breaking changes.

Testing

Tested locally in an Astro project (not the repo's demo page):

  • intersect-[0.3], intersect-[0.75], intersect-[1] trigger at
    the expected scroll positions.
  • Out-of-range values (e.g. intersect-[1.5]) clamp to 1 instead of
    silently failing.
  • Existing intersect-half / intersect-full classes still resolve
    correctly (named thresholds take priority over parsing).

Open question for maintainer

Happy to rename intersect-[value] to something more explicit (e.g.
intersect-threshold-[value]) if you'd prefer it to be more
explicitly named. Wanted to keep the first pass minimal and get your
take before bikeshedding it further.

@heidkaemper heidkaemper self-assigned this Sep 6, 2026
@heidkaemper

Copy link
Copy Markdown
Owner

First of all, thanks for the idea and your contribution!

I'm going to close this PR, but the feature itself made it in. I've implemented the modifier myself, with a few things that differ from your original version:

  • To answer your open question: I kept the short intersect-[0.3] syntax
  • The value is now read from element.classList with an anchored pattern instead of matching against the full className string
  • The named thresholds stayed plain conditions rather than a lookup object, to keep the file consistent with the rest of the codebase
  • Added tests covering all of this
  • I also added an intersect-margin-[…] modifier, which should pair nicely with the custom threshold.

All of this will be in the upcoming 3.0 release.

@heidkaemper heidkaemper closed this Sep 6, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants