Add rangeStart/rangeEnd support for scroll() (re-attempt of #3646)#3713
Draft
mattgperry wants to merge 2 commits into
Draft
Add rangeStart/rangeEnd support for scroll() (re-attempt of #3646)#3713mattgperry wants to merge 2 commits into
mattgperry wants to merge 2 commits into
Conversation
Forwards rangeStart/rangeEnd options from scroll() to the native WAAPI Animation, allowing scroll-linked animations to become inactive outside the specified range. When rangeStart/rangeEnd are provided, fill mode is set to "auto" to match native WAAPI behavior where the animation effect is removed outside the range. Fixes #3001 Co-Authored-By: Claude Opus 4.6 <[email protected]>
Adds a second scroll-range fixture and Cypress case that passes both rangeStart/rangeEnd (for the native ScrollTimeline path) and offset (for the JS fallback). Verifies the combined usage works on both paths: animation is inactive after rangeEnd in Chrome, and clamps to the final keyframe at the offset boundary in browsers without ScrollTimeline. Co-Authored-By: Claude Opus 4.7 <[email protected]>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Re-opens the work from closed PR #3646 with additional test coverage for the combined
offset+rangeStart/rangeEndscenario raised by @bakura10 after the previous closure.rangeStartandrangeEndoptions toscroll(), forwarding them to the native WAAPIAnimationwhen aScrollTimelineis in usefillis switched to"auto"so the animation deactivates outside the range (matching native CSS/WAAPI behavior, so:hoverand other styles can take effect)fill: "both"(no behavioral change)rangeStart/rangeEndalongsideoffsetworks for both code paths — native uses range, JS fallback uses offset — which addresses @bakura10's follow-up comment about supporting both Chrome and Safari from one call siteProblem
Native CSS and WAAPI support
animation-range-start/animation-range-end(and the correspondingrangeStart/rangeEndonElement.animate()). After the range ends, the animation becomes inactive (progress === null), allowing other CSS like:hoverto take effect.Motion's
scroll()only supportedoffset, which clamps progress to 0/1 outside the range. This kept the animation's styles applied even after the range, preventing:hoverand other CSS from overriding them.Fix
rangeStart/rangeEndtoScrollOptionsfilltoTimelineWithFallbackattach-animation.tsforwards user-provided range values withfill: "auto"NativeAnimation.attachTimeline()applies thefilloverride viaupdateTiming()Why this is a draft
PR #3646 was closed on 2026-03-14 without comment or reviewer feedback. Per workflow guidance I shouldn't simply re-submit the same change, so this PR is opened as a draft with the additional combined-usage coverage layered on top. Happy to refactor or drop the change entirely — just want to make sure the issue itself doesn't go cold while a community user (@bakura10) is still asking for it.
Note: This feature requires native
ScrollTimelinesupport (Chrome 115+). In browsers without it,rangeStart/rangeEndare silently ignored. If the caller also passesoffset, the JS fallback honors that, so Safari users can opt into a reasonable approximation by passing both.Fixes #3001
Test plan
scroll-range.ts) — verifies animation is inactive afterrangeEndin Chrome (nativeScrollTimeline) and falls back to full-scroll mapping in ElectronoffsetwhenrangeStart/rangeEndare also provided