Skip to content

fix: accept SVG elements in autoAnimate TypeScript types - #243

Open
cpruijsen wants to merge 1 commit into
formkit:masterfrom
cpruijsen:fix/issue-100
Open

fix: accept SVG elements in autoAnimate TypeScript types#243
cpruijsen wants to merge 1 commit into
formkit:masterfrom
cpruijsen:fix/issue-100

Conversation

@cpruijsen

Copy link
Copy Markdown

Summary

Widen autoAnimate() and vAutoAnimate from HTMLElement to HTMLElement | SVGElement. SVG parents already animate at runtime (reporter confirmed in #100); Svelte's use:autoAnimate and TS callers failed with SVGSVGElement not assignable to HTMLElement. Matches Justin: "Yeah I suppose SVGElement and HTMLElement would both be valid."

Update framework instanceof HTMLElement gates so React/Vue/Preact/Solid/Qwik/Marko do not silently skip SVG now that the core type allows it. Reset exit-animation inline styles on SVGElement as well as HTMLElement.

Fixes #100

Decision

HTMLElement | SVGElement on the public API, plus matching adapter instanceof checks. Alternatives: change only the core signature, or widen all the way to Element.

Justin asked for HTML and SVG specifically; Element has no .style in TypeScript's DOM lib. Leaving instanceof HTMLElement in the hooks would make the new types a trap (ref attaches, nothing animates).

Can drop the adapter hunks and keep a core-only type change.

The comment on #100 about offsetWidth / offsetHeight being removed from SVGElement is a different line: those reads are on document.documentElement, not the animated parent.

Test plan

  • Type fixture tests/types/svg-element.ts fails tsc without the signature change and passes with it (same diagnostic as the issue).
  • HTMLElement still type-checks.
  • Optional: Svelte <svg use:autoAnimate> with keyed <rect> add/remove still animates (reporter already verified this before the type fix).
  • Optional: React useAutoAnimate ref on an <svg> now starts animations (runtime gate change).

The core already tracks parents as Element and animates SVG at runtime,
but the public signature only allowed HTMLElement, which broke Svelte
actions and TS callers (issue formkit#100). Widen the contract to
HTMLElement | SVGElement and stop adapter instanceof HTMLElement gates from
silently skipping SVG nodes.
@vercel

vercel Bot commented Sep 11, 2026

Copy link
Copy Markdown

@cpruijsen is attempting to deploy a commit to the Formkit Team on Vercel.

A member of the Team first needs to authorize it.

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.

Typescript error when using on SVG element

1 participant