Background blur filter not working on div element when animation

I am trying to make a carousel that moves infinitely, all the elements in the div have a background blur filter as shown in the image, They are being applied when they are stationary but not when they are moving, tldr; I’m trying to create a glassmorphism effect with the carousel. Here are images attached below.

How do I preserve the blur when they are moving ??

I’m guessing here, you must have applied blur effect on the parent div of that rotating element. If you want to animate it, create a separate div inside and apply glassmorphism effect in there and animate it.

If you’ve two separate layers then either move both layers or keep them inside a div and animate that div.

Also it would be best if you share your project, so other can diagnose properly.

Sorry about not including a read only link
Here it is

Please have a look into the issue

Oh I didn’t get to reply you. But I’m not sure if this is some kind of render issue but I didn’t saw it.

I was hoping if other users would look into it, as well.