Jump to content
Search Community

Motion Blur offering

swampthang test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

  • Like 2
Link to comment
Share on other sites

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

 

 

  • Like 4
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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);

 

 

 

 

 

 

 

  • Like 2
Link to comment
Share on other sites

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.

 

 

Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...