Slide transition throws a "Invalid keyframe value for property height" warning since Svelte 5

[flayks]

Describe the bug

Using Svelte 4 and before, this REPL custom Accordion with a slide effect was working perfectly. Since Svelte 5, it throws a warning:

Invalid keyframe value for property height: NaNpx

I like the approach of this accordion using {#key isOpen} as it re-runs the transition and also keeps the content in the DOM, only playing with CSS to hide the content when closed.

I haven't made this REPL but adapted it to a similar component in my codebase.

Reproduction

REPL with Svelte 5 (and the warning): https://svelte.dev/playground/a904286e5a4c497daa9e6f9351b3f3a9?version=5
REPL with Svelte 4 (and no warning): https://svelte.dev/playground/a904286e5a4c497daa9e6f9351b3f3a9?version=4

Logs

> Invalid keyframe value for property height: NaNpx

System Info

System:
    OS: macOS 15.1
    CPU: (12) arm64 Apple M2 Max
    Memory: 258.97 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.18.0 - ~/.local/state/fnm_multishells/32005_1720871078955/bin/node
    Yarn: 1.22.19 - ~/.local/state/fnm_multishells/32005_1720871078955/bin/yarn
    npm: 10.9.0 - ~/.local/state/fnm_multishells/32005_1720871078955/bin/npm
    pnpm: 8.5.0 - ~/.local/state/fnm_multishells/32005_1720871078955/bin/pnpm
    bun: 1.1.34 - ~/.bun/bin/bun
  Browsers:
    Brave Browser: 130.1.71.118
    Safari: 18.1

Severity

annoyance

[sunshineplan]

I am also encountering this warning: “Invalid keyframe value for property height: NaNpx”.

However, I don’t think I’ve used the animation part of my code yet, and I’m not entirely sure where the problematic code is.
It might be within the {#each} block of a table.

In the console, I see that the issue seems to be related to this part of the code:

K = t.animate(se, {
    duration: W,
    fill: "forwards"
}),

Feel free to let me know if you need any adjustments or additional details!

[vhtmui]

I have the same problem.

And relate to:

	var animation = element.animate(keyframes, { duration: delay });
//and 
	animation = element.animate(keyframes, { duration, fill: 'forwards' });

I am also encountering this warning: “Invalid keyframe value for property height: NaNpx”.

However, I don’t think I’ve used the animation part of my code yet, and I’m not entirely sure where the problematic code is. It might be within the {#each} block of a table.

In the console, I see that the issue seems to be related to this part of the code:

K = t.animate(se, {
    duration: W,
    fill: "forwards"
}),

Feel free to let me know if you need any adjustments or additional details!

[niemyjski]

I also have this on a tr element transition:slide={{ delay: 0, duration: 250, axis: 'y' }} and I see it all the time.

[dummdidumm]

The height is parsed with parseFloat which results in NaN when the height is "" - this happened in Svelte 4, too, but didn't go through the animations API so wasn't validated by the browser which throws the warning.

[jamestinman]

Also have this, sliding from a no height div. Adding a min-height (e.g. min-h-1 with tailwind) seems to prevent this, although you may need to also hide the element

[riancintiyo]

I have the same problem here, I got warning "Invalid keyframe value for property..."

Using Svelte 5 and Motion Motion Version [v12.4.10] library

This is the link to reproduce the error: link

The problem relate to this:

animate(
        element,
        {
          filter: [`blur(${blurAmount}px)`, 'blur(0px)'],
          opacity: [0, 1],
          transform: ['translateY(20px)', 'translateY(0px)'],
        },
        {
          duration: duration,
          delay: delay,
          type: "spring",
          ease: "easeIn"
        },
);

Here is the sneak peak from the error:

Does anyone managed to solve the error?

[riancintiyo]

I have the same problem here, I got warning "Invalid keyframe value for property..."

Using Svelte 5 and Motion library

This is the link to reproduce the error: link

The problem relate to this:

animate(
element,
{
filter: [blur(${blurAmount}px), 'blur(0px)'],
opacity: [0, 1],
transform: ['translateY(20px)', 'translateY(0px)'],
},
{
duration: duration,
delay: delay,
type: "spring",
ease: "easeIn"
},
);
Here is the sneak peak from the error:

Does anyone managed to solve the error?

Found a clue about the error, when I set the filter with static value like:

filter:"blur(10px)"

then the error disappear, but, when change the filter value to hybrid (using array) then the error is appear:

filter: ['blur(10px)', 'blur(0px)']