[BUG] Warning, Invalid Keyframe Value for Property

[riancintiyo]

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]

[riancintiyo]

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

filter:"blur(10px)"

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

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

[izakfilmalter]

Running into the same issue with text-effect from motion-primitives. Doing the above solved it for me:

const presetVariants: Record<
  PresetType,
  { container: Variants; item: Variants }
> = {
  blur: {
    container: defaultContainerVariants,
    item: {
      hidden: { opacity: 0, filter: ['blur(12px)', 'blur(0px)'] },
      visible: { opacity: 1, filter: ['blur(0px)', 'blur(0px)'] },
      exit: { opacity: 0, filter: ['blur(12px)', 'blur(0px)'] },
    },
  },
  'fade-in-blur': {
    container: defaultContainerVariants,
    item: {
      hidden: { opacity: 0, y: 20, filter: ['blur(12px)', 'blur(0px)'] },
      visible: { opacity: 1, y: 0, filter: ['blur(0px)', 'blur(0px)'] },
      exit: { opacity: 0, y: 20, filter: ['blur(12px)', 'blur(0px)'] },
    },
  },
  scale: {
    container: defaultContainerVariants,
    item: {
      hidden: { opacity: 0, scale: 0 },
      visible: { opacity: 1, scale: 1 },
      exit: { opacity: 0, scale: 0 },
    },
  },
  fade: {
    container: defaultContainerVariants,
    item: {
      hidden: { opacity: 0 },
      visible: { opacity: 1 },
      exit: { opacity: 0 },
    },
  },
  slide: {
    container: defaultContainerVariants,
    item: {
      hidden: { opacity: 0, y: 20 },
      visible: { opacity: 1, y: 0 },
      exit: { opacity: 0, y: 20 },
    },
  },
}