lottie-web icon indicating copy to clipboard operation
lottie-web copied to clipboard

Any plans for blur effects

Open phantomboogie opened this issue 9 years ago • 20 comments

I'm trying to create a box with faded edges.

I have a track matte I'm using as a mask and I added a blur which that didn't export. I then tried to do the same thing using a mask with a feather, but that also didn't convert.

Any ideas for a work around or plans to implement this feature down the road?

phantomboogie avatar Feb 22 '17 23:02 phantomboogie

https://dl.dropboxusercontent.com/u/113452155/bodymovin_grad_issue.aep Here's my ae file and the issue I'm dealing with.

phantomboogie avatar Feb 22 '17 23:02 phantomboogie

blur and feather are on the roadmap but not ready yet. There is a big performance hit for this kind of effects.

bodymovin avatar Mar 02 '17 09:03 bodymovin

Thanks for the reply. I kind of figured out a work around by creating a gradient in a seperate ai file and importing that to use as a gradient in AE. Bodymovin exported that as a png and it worked.

phantomboogie avatar Mar 03 '17 23:03 phantomboogie

Hi - Any update on this? We're trying to create liquid motion effect and need blur / contrast effects but doesn't look to be supported.

slane2016 avatar Aug 24 '17 02:08 slane2016

Hi, also curious if there are any updates on blur effects.

brrrme avatar Sep 21 '17 10:09 brrrme

Hey, it's 2018 and I'm also curious! Any updates on the blurry business?

morkilis avatar Mar 14 '18 14:03 morkilis

Not yet unfortunately. Blur effects are performance intensive and wouldn't work well on browsers. Also, blur properties don't translate well to svg blur filters.

bodymovin avatar Mar 15 '18 00:03 bodymovin

I'd really love to have the blur effect as well even if it is performance intensive. Thanks for keeping us in the loop about this though, I was wondering why my motion blur wasn't working!

Beefsock avatar Mar 20 '18 06:03 Beefsock

+1 for blur

kazuser avatar Mar 22 '18 15:03 kazuser

for now, you can "hack" a blur filter to an element yourself. if you don't need it animated, you can create an svg blur filter and select the element you want to blur via a class or id and attach the blur filter manually. Check here for more info about referencing html/svg elements.

bodymovin avatar Mar 24 '18 20:03 bodymovin

I think you can also animate it using the svg blur filter workaround. Just time the animation and change the blur parameter as a function of time.

zhengs avatar Jun 13 '18 21:06 zhengs

Add blur pls.

michelluarasi avatar Jul 16 '18 08:07 michelluarasi

for now, you can "hack" a blur filter to an element yourself. if you don't need it animated, you can create an svg blur filter and select the element you want to blur via a class or id and attach the blur filter manually. Check here for more info about referencing html/svg elements.

When I used a class and added the blur filter code in the CSS, it doesn't seem to appear. But the class is there, I confirmed. Any pointers to what I might be doing wrong?

marycc001 avatar Sep 12 '18 20:09 marycc001

^ I'm having the same issue as marycc001. I've added a blur filter and in my css applied it with a filter:url but it causes the whole element to disappear upon being applied.

eidunno777 avatar Jan 26 '19 23:01 eidunno777

hi, @eidunno777 can you share a link with the implementation?

bodymovin avatar Feb 02 '19 01:02 bodymovin

Gaussian blur seems to now be implemented! This is very close to motion blur, but ofc needs heavy customization to match it.

chrants avatar Jul 12 '19 22:07 chrants

Gaussian blur seems to now be implemented! This is very close to motion blur, but ofc needs heavy customization to match it.

Just tried it with lottie-react-native and it doesn't work :(

GDnsk avatar Jan 04 '20 02:01 GDnsk

Gaussian blur seems to now be implemented! This is very close to motion blur, but ofc needs heavy customization to match it.

tried lottie web and it doesn't work

It would be interesting to have this resource someday, even if it happens or you don't enjoy it, think that you can be left with the burden of those who apply;

jerfeson avatar May 24 '20 23:05 jerfeson

shine I used this PNG as a Track Matte on the layer I wanted a feathered mask on, method works for masks that don't change shape.

gobhit avatar Aug 01 '21 12:08 gobhit

5 years later and it's still not working...

(well only the blur layer effect is supported for Android - see supported features)

okpoub avatar Sep 01 '23 14:09 okpoub