Lottie-web: Any plans for blur effects

[phantomboogie]

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]

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

[bodymovin]

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

[phantomboogie]

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.

[slane2016]

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.

[brrrme]

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

[morkilis]

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

[bodymovin]

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.

[Beefsock]

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!

[kazuser]

+1 for blur

[bodymovin]

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.

[zhengs]

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.

[michelluarasi]

Add blur pls.

[marycc001]

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?

[eidunno777]

^ 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.

[bodymovin]

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

[chrants]

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

[GDnsk]

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 :(

[jerfeson]

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;