#3790·motion

SVG clipPath/filter share the WAAPI zero-duration desync #3781 just fixed for opacity/transform

Author: MILLERMARRUCreated Aug 10, 2026Updated Aug 13, 2026

#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:

typescript
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:

typescript
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:

typescript
<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.