Why I am getting, "Invalid keyframe value for property filter: blur"?

[watery-desert]

While animating from filter: 'blur(0px)', to filter: 'blur(10px)', I am getting this warning: Invalid keyframe value for property filter: blur(-0.2773px)
here is the code

  scaleOpacityMenuControl.start({
         //....//
        filter: 'blur(0px)',
        transition: {
           //....//
        },
      });

to

  scaleOpacityMenuControl.start({
         //....//
        filter: 'blur(10px)',
        transition: {
           //....//
        },
      });

motion version "motion": "^11.14.1",

the added that to animate={scaleOpacityMenuControl} and toggle a state to change the animation state.

[mattgperry]

What transition are you using? I assume it's one with a spring bounce or easing overshoot (backOut)

[watery-desert]

here is my transition for forward animation

 transition: {
          duration: 0.3,
          type: 'easeIn',
        },

Here is for reverse

 transition: {
          duration: 0.7,
          delay: 0.3,
          type: 'spring',
          bounce: 0.6,
          stiffness: 300,
          damping: 20,
          mass: 1,
        },

[mattgperry]

Yeah it’ll be the reverse spring that does it. You would need to then bounce down to 0 to make sure it doesn’t overshoot 0 into the negative values. Is it just filter you’re animating? If not you can do a transition just for this value

transition: {
Spring settings.
filter: { non bouncy spring settings }
}

[watery-desert]

No, not just the blur filter. I am animating other things as well.

scale: 1,
opacity: 1,
y: 0,
filter: 'blur(0px)',

scale: 0.4,
opacity: 0,
y: -25,
filter: 'blur(10px)',

Yes, it's true the spring animation is causing the problem. However, I am not able to fix it. I didn't get it what exact value to add inside the filter? filter: { } I tried various combinations all giving the same result. Even if I leave it empty. First thing no more warning. But, blur(0px) to 10px is working but blur(10px) to 0px not working.

[mattgperry]

Can you share a code sandbox so I can have a play?

[watery-desert]

It turns out that the delay is making the blur effect invisible. You have to screen-record to see frame by frame when the text appears. Just remove or change the delay to like 0.01 to see the blur.

Here is the sandbox link: https://codesandbox.io/p/github/watery-desert/motion-blur-issue/main?import=true
And here is github link: https://github.com/watery-desert/motion-blur-issue