Motion Blur offering

[swampthang 112 Likes (Specialist)]

I've seen lots of posts on Stack Overflow as well as here regarding animating motion blur. I wanted to share my codepen in case it helps someone else or spurs a thought that leads to a better solution. It's not the pithiest code and I'm sure I'll end up tweaking it once I get it into my Electron app. 

 

The only thing I noticed, and it's not as big of a deal to me since I'm using an Electron app that only uses Chromium, but FireFox isn't showing the underlying elements. If you run inspector you can see that they're being animated and positioned properly but they don't show up. Not sure what the issue is. If I use createElementNS to create the div elements it doesn't utilize the blur filter in Chrome. But, if I don't use createElementNS to create the filters, it doesn't work in Chrome. 

 

Thoughts?

See the Pen dRYXjO by swampthang (@swampthang) on CodePen

[OSUblake 9,990 Likes (Superhero)]

Looks good! Did you come across any good resources?

 

Here's a motion blur demo I made for @PointC using Pixi. The logic should work the same if somebody wanted to use it with svg or canvas.

 

See the Pen a01012b229e6e2ace239cb83a754b64f by osublake (@osublake) on CodePen

 

 

 

[Jonathan 5,176 Likes (Superhero)]

Back in the day Flash SWF output was perfect for this type of effect. But now canvas is the best choice for non CSS motion blur. Also SVG displacement map and turbulence can work with noised image.

 

But you can create fake Motion blur with CSS using a mix of box-shadow and text-shadow adjusting the spread and color alpha, since CSS Filters is not that widely supported.

 

GSAP CSS Motion blur effect:

 

See the Pen QNGQaN by jonathan (@jonathan) on CodePen

Or using a straight CSS animation motion blur effect:

 

See the Pen pqdni by jonathan (@jonathan) on CodePen

 

Happy Tweenning

 

 

[swampthang 112 Likes (Specialist)]

1 hour ago, OSUblake said:

Looks good! Did you come across any good resources?

 

Hey, Blake. Resources for what, the motion blur? 

[OSUblake 9,990 Likes (Superhero)]

20 minutes ago, swampthang said:

 

Hey, Blake. Resources for what, the motion blur? 

 

Yeah. Most of the articles I've come across seem to be pretty complicated.

[swampthang 112 Likes (Specialist)]

The biggest issue for me was being able to make sure it made it to the canvas. Also, in the app, there could be multiple instances of this animation, each in its own foreignObject. So, I needed to be sure I could place the filters inside the foreign object itself and have them work, which they did in Chrome.

 

The only attributes I needed to control were the feOffset's dx and dy and feGaussianBlur's stdDeviation so I didn't really need to dig too deep. I didn't want to have to include another library either. Using staggerFromTo works well for me because I can tween the attributes along with the motion of the elements.

 

What I came up with works fine for me but for general web use, it might need some tweaking.

[OSUblake 9,990 Likes (Superhero)]

I'm a little surprised that having the filters in a foreignObject works. I thought that was kind of like a separate scope, and separate from the SVG. Maybe that's what the problem in Firefox is.

 

But the easiest way to render filters in canvas is to use canvas. I don't think a lot of people know that you can use CSS and SVG filters with canvas.

context.filter = "url(#svgFilter) blur(10px) sepia(60%)";
context.font = "36px Oswald";
context.fillText("Hello, World!", 50, 100);

 

 

See the Pen 9baa6acb9856dc1c78adbe9bd25f98ac?editors=0010 by osublake (@osublake) on CodePen

 

 

 

 

 

[swampthang 112 Likes (Specialist)]

That's pretty awesome, Blake. You're probably right on the FireFox issue. I have been able to add the animation to my app. Here's an MP4 that was exported from it. It animates in from the left and out to the right. This is an example of what I'm using GSAP to pull off. It is amazing.

 

 

This one animates vertically. Note that the blur filter picks up the actual letters, even though the filter is on the div inside the foreignObject before exporting to MP4. I use FFMPEG to create a PNG sequence and use it as the input.

 

 

[OSUblake 9,990 Likes (Superhero)]

That looks really good! Is that all this app is going do?

 

I'm also really surprised at the real-time performance of your demo. Gaussian blurs are usually pretty slow to render.

[swampthang 112 Likes (Specialist)]

The app is mainly a text animation app. But it's become an app that allows you to import videos and audio as well as images. The name of it is Kinetic Text Animator. The dotcom URL is the name of the app. (Didn't want to post a link) 

 

The thing is, GSAP powers the timeline and ALL the animations. Anyone who wonders about the power of GSAP need wonder any longer. It's awesome. 

[swampthang 112 Likes (Specialist)]

Blake, one of our users created this video using the app. The motion blur is visible but greatly reduced in the export. You might be right about the "iffy-ness" of using filters in the foreignObject...

 

 

[OSUblake 9,990 Likes (Superhero)]

I don't know if this is the main source of the problem, but I see cropping going on in that video and your CodePen demo. Filters are applied to an area, which by default are set to -10% for x and y, and 120% for width and height. Any part of the blur or offset that extends beyond the defined filter area will be cropped.

 

It might also help defining filterUnits.

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/filterUnits

[swampthang 112 Likes (Specialist)]

Thanks, Blake. Will play with filter settings.