search

formkit / auto-animate

A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application.
https://auto-animate.formkit.com
MIT License
12.79k stars 225 forks source link

Typescript error when using on SVG element #100

Open braebo opened 2 years ago

braebo commented 2 years ago

Auto-animate seems to work great on an SVG element, but typescript freaks out.

Argument of type 'SVGSVGElement' is not assignable to parameter of type 'HTMLElement'.

Would it be possible to add SVG elements to the type definition?

My use-case looks like this (inside a .svelte component):

<svg height="30" width="100%" viewBox="0 0 {length} 30" use:autoAnimate>
    {#each sequence.notes as note}
        <rect
            x={note.ticks + 1}
            y="-4"
            width={note.duration * 50}
            height={7 + note.velocity * 30}
            fill="hsla({100 - Math.round(note.velocity * 100)},30%,50%,1)"
            rx="2"
        />
    {/each}
</svg>
justin-schroeder commented 2 years ago

Hmm, interesting. Yeah I suppose SVGElement and HTMLElement would both be valid. Worth fixing this I think 👍

braebo commented 2 years ago

Line 120 might be a problem:

const { offsetWidth, offsetHeight } = root

offsetWidth and offsetHeight were removed from SVGElement years ago... but it still works 🤔