#3781 fixed the WAAPI/instant-write channel mismatch for opacity and transform on SVG elements by adding both to cssStyleProperties in build-attrs.ts, so they get written through style instead of as raw SVG attributes. clipPath and filter are in the same boat and are still missing from that list.
acceleratedValues (packages/motion-dom/src/animation/waapi/utils/accelerated-values.ts) is:
export const acceleratedValues = new Set<string>([
"opacity",
"clipPath",
"filter",
"transform",
"backgroundColor",
])cssStyleProperties (packages/motion-dom/src/render/svg/utils/build-attrs.ts, post-#3781) is:
export const cssStyleProperties = [
"transform",
"opacity",
"offsetDistance",
"offsetPath",
"offsetRotate",
"offsetAnchor",
]clipPath and filter are WAAPI-eligible but aren't in cssStyleProperties, so on an SVG element they still fall through to being written as plain SVG attributes (setAttribute('clip-path', ...) / setAttribute('filter', ...)) whenever Motion writes an instant/final value. WAAPI-driven animations, on the other hand, always operate on the element's CSS style/Web Animations timeline, never on attributes. That's exactly the split #3781's PR description describes for opacity: "WAAPI completion and instant JS updates write to the same channel" only holds for the four properties actually in the list.
Repro, same shape as #3781's own regression test but with clipPath:
<svg width={200} height={200}>
<motion.circle
id="target"
cx={50} cy={50} r={40}
animate={{ clipPath: hidden ? "circle(0%)" : "circle(50%)" }}
initial={false}
transition={
hidden
? { duration: 0.3 }
: { duration: 0.3, clipPath: { duration: 0 } }
}
/>
</svg>Toggling hidden back and forth should leave a WAAPI-completed zero-duration clipPath restore stale on the attribute while the CSS-driven animation channel has already moved on, the same "stuck at the mid-animation value" symptom #3781 fixed for opacity, reproducible with the exact same toggle-twice pattern as the waapi-svg-zero-duration Cypress spec added there.
#3781 fixed the WAAPI/instant-write channel mismatch for
opacityandtransformon SVG elements by adding both tocssStylePropertiesinbuild-attrs.ts, so they get written throughstyleinstead of as raw SVG attributes.clipPathandfilterare in the same boat and are still missing from that list.acceleratedValues(packages/motion-dom/src/animation/waapi/utils/accelerated-values.ts) is:cssStyleProperties(packages/motion-dom/src/render/svg/utils/build-attrs.ts, post-#3781) is:clipPathandfilterare WAAPI-eligible but aren't incssStyleProperties, so on an SVG element they still fall through to being written as plain SVG attributes (setAttribute('clip-path', ...)/setAttribute('filter', ...)) whenever Motion writes an instant/final value. WAAPI-driven animations, on the other hand, always operate on the element's CSSstyle/Web Animations timeline, never on attributes. That's exactly the split #3781's PR description describes for opacity: "WAAPI completion and instant JS updates write to the same channel" only holds for the four properties actually in the list.Repro, same shape as #3781's own regression test but with
clipPath:Toggling
hiddenback and forth should leave a WAAPI-completed zero-durationclipPathrestore stale on the attribute while the CSS-driven animation channel has already moved on, the same "stuck at the mid-animation value" symptom #3781 fixed for opacity, reproducible with the exact same toggle-twice pattern as thewaapi-svg-zero-durationCypress spec added there.