1. Describe the bug

I have problem about getting warning "⚠️ Invalid keyframe value for property filter: blur"

Using Svelte 5 and Motion library

2. IMPORTANT: Provide a CodeSandbox reproduction of the bug

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"
        },
);

3. Steps to reproduce

This is the link to reproduce the error: link

1. Go to 'Browser Console'
2. See error

4. Expected behavior

If you refresh or add new update to trigger the HMR, there will be warning appear about the keyframe value

6. Video or screenshots

Here is the sneak peak from the error:

5. Environment details

Windows 11, Chrome Version 133.0.6943.142 (Official Build) (64-bit), Svelte 5.22.5, Motion Version [v12.4.10]