Jump to content
Search Community

Motion Blur Plugin for Javascript

scubajosh 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

So I am trying to make a green sock js motion blur plugin since its not available yet. Do you guys think its possible to do it without canvas.

 

I am trying to figure out how to make it and so far I think it might be best using css3 or just strictly canvas.

 

CSS Motion Blur

http://cssdeck.com/labs/motion-blur

 

There is also grant skinners blur filter for easeljs

Was thinking maybe we can port over the current motion blur plugin for as3 using his blur filter. Any thoughts on this or reasons why there isn't a motion blur plugin yet?

http://www.createjs.com/#!/EaselJS/demos/filters

  • Like 1
Link to comment
Share on other sites

Hey,

 

Thanks for the question and for the link to the CSS Motion Blur.

 

Despite the fact that the example uses cumbersome CSS animations, I give the author credit as it is a worthy effort considering the limited resources available to simulate a good motion blur (textShadow, boxShadow). These properties simply add blurred trails and don't truly blur the entire asset like webkit's css blur filter does

 

Right now the css support is really limited and we can't put a ton of effort right now into features or effects that won't have wide-spread browser support.

 

Also to consider is that our MotionBlur doesn't just tween blur values from 0 to something (and or vice versa), it applies a realistic blur based on direction and velocity.

 

Here is a refresher from our docs for those that are interested

 

 MotionBlurPlugin provides an easy way to apply a directional blur to a DisplayObject based on its velocity and angle of movement in 2D (x/y). This creates a much more realistic effect than a standard BlurFilter for several reasons:
  • A regular BlurFilter is limited to blurring horizontally and/or vertically whereas the motionBlur gets applied at the angle at which the object is moving.
  • A BlurFilter tween has static start/end values whereas a motionBlur tween dynamically adjusts the values on-the-fly during the tween based on the velocity of the object. So if you use a Strong.easeInOut for example, the strength of the blur will start out low, then increase as the object moves faster, and reduce again towards the end of the tween.
motionBlur even works on bezier/bezierThrough tweens!
 
To accomplish the effect, MotionBlurPlugin creates a Bitmap that it places over the original object, changing alpha of the original to [almost] zero during the course of the tween. The original DisplayObject still follows the course of the tween, so MouseEvents are properly dispatched. You shouldn't notice any loss of interactivity. The DisplayObject can also have animated contents - MotionBlurPlugin automatically updates on every frame. 

 

 

So even if there was css support for blurring, I imagine it will be limited to simple x/y blurring and not do true directional blurring. 

 

That really leaves canvas as the only viable solution right now and perhaps into the near future. Similar to how our Flash MotionBlur plugin manipulates BitMap data, canvas probably gives us a closer API to work with.  As you mentioned, yes EaselJS does have a blur filter but we probably wouldn't pursue that quite yet for the following reasons:

 

1: It would be difficult to justify building a premium tool that has a dependency on a 3rd party library

 

2: To no fault of the EaselJS devs, and in fact by their own admission, bitmap filters such as blurFilter are very processor intensive (just like they are in Flash). Updating a blurFilter many times per second will most likely lead to some unfortunate performance degradation.

 

So although a realistic MotionBlur would be a great tool to have, right now our priorities are on other tools. We will continue to keep our eyes open for ways to pull it off, but again, it seems like right now there wouldn't be broad support or favorable performance. 

 

That said, I encourage you to pursue the possibilities. We'd be very interested to see what you come up and hear what you discover that may refute or support the above assumptions.

 

Thanks again for the question.

  • Like 4
Link to comment
Share on other sites

  • 5 months later...

Here is the browser support for:

 

CSS Filters: http://caniuse.com/#feat=css-filters

SVG Filters: http://caniuse.com/#feat=svg-filters

 

CSS  filters are only around 45.43% Global Support. 

SVG Filters are only at 76.05% Global Support.

 

Specification for CSS Filters on w3.org

Specification for SVG Filters on w3.org

 

As a side note..

 

The above original CSS motion blur example was from this SitePoint tutorial: How To Use Motion Blur In CSS3 Animations
 

:)

  • Like 3
Link to comment
Share on other sites

  • 1 year later...

Nice Job davi,

 

Here is another way .. im not trying to do a motion blur but basically doing the same thing, but using the AttrPlugin to animate the stdDeviation attribute for the SVG Gaussian Blur filter. Since IE does not support CSS Filters. But using SVG Filters work in IE10+

 

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

 

It uses less code and applies it using the GSAP onUpdate special callback property. without having to worry about vendor prefixes

 

onUpdate : Function - A function that should be called every time the animation updates (on every frame while the animation is active).

 

Maybe the above code can give yo some ideas to help you?

 

Happy Tweening :)

  • Like 4
Link to comment
Share on other sites

  • 7 months later...

Hi together,

 

is there anything new about the motion blur, like blurX with GSAP for CSS, but without a SVG blur?

 

I want to use it for banners and am not quite sure how many browsers will support the effect with SVG...

 

I just want to blur in the X direction to simulate motion and GSAP to do the cross-browser-magic ;-)

Link to comment
Share on other sites

Hello Technics1210,

 

You can use a CSS Filter Blur.. but keep in mind CSS Filters do not work in IE11. And Microsoft Edge only has partial support for CSS Filters. Both Firefox and Chrome support CSS Filters with their latest versions.

 

CSS Filter blur() animated with GSAP:

 

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

 

And these other CSS Filters animating with GSAP:

 

CSS Filter grayscale():

 

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


 

CSS Filter brightness():

 

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


 

CSS Filter tint() (hue-roate):

 

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

 

But SVG Filters have the most support cross browser, even working in IE11 and MS Edge ;)

 

:)

  • Like 1
Link to comment
Share on other sites

I believe CSS filters are just shortcuts to their SVG counterpart.

I've tried a motion blur in banners (motion blur meaning animating just the X or Y, not both X and Y). Worked fine on my end but the clients thought they were running slow. I don't think browsers are quite ready for animated filter effects with banners just yet, like how we did in Flash (especially with anything larger). Typically in a banner, you're probably animating more than just one thing, and with a motion blur, you're probably also sliding the object and applying the filter just about every tick, at the same time. Then you have other banners that might be on the same page, as well as other site content --  all running at the same time. Just because you can do something, doesn't mean you should :)

Personally, I would skip the motion blur but if it is absolutely necessary, then I would make a static copy of the object with the blur applied...and then just fade out the blurred copy overtop the unblurred copy during the tween. Doing this rather than continually updating the filter.

Link to comment
Share on other sites

Here is a way to fake motion blur with just CSS and with CSS animation.

 

See the Pen ?editors=1100 by jonathan (@jonathan) on CodePen

 

Also doing it with a timeline in GSAP, quick and dirty, could be better with more time:

 

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

 

It is a mix of:

  • skewX
  • scaleX
  • text-shadow
  • box-shadow,
  • and transform-origin

Another way would be to add an element with some noise that mimics the element and blur in x or y.. so the noise with a blur could mimic motion blur.

 

:)

  • Like 2
Link to comment
Share on other sites

  • 4 months later...

Resurrecting an old post, not sure if I should or should not do it here but since this thread already exists, I thought I might chime in and also throw a question.

 

First, from my testing SVG blur works* in all major browsers. Animating them with GSAP is also ok*.

 

See the Pen yJQgVO by dipscom (@dipscom) on CodePen

 

* The caveats I have found are:

 

Safari seem to be applying a different blend mode to the blurred image. I think it is an "add" or "lighten" operation thus, your image looks white washed if compared to the original one.

 

The above is a Safari bug. Here's a fix.

 

IE(10 and 11 - 9 plays no dice) and EDGE, albeit the filter works, they are not tweening between the values. It only goes from "off" to "on" and vice versa. That is not the case. IE and EDGE do tween the values correctly, I had something wrong in my original code, thanks to Jonathan, for seeing the obvious.

 

 

Does anyone have an idea why that's the case? (Like, you Jonathan, you always know this stuff ;) ) I will be looking into finding a work around but I have a feeling it might be one of those "browser issues"...

Edited by Dipscom
Link to comment
Share on other sites

Hello Dipscom, ;)

 

Regarding Safari with the blend mode you feel is using add or lighten..

 

You could try and add the css property mix-blend-mode

 

https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

 

It is basically the same as changing the blending modes in Photoshop in the layers panel

 

Regarding IE11 and Edge support for SVG filters

 

You might need to also add the actually SVG equivalent property in your CSS stylesheet for that elements CSS rule. The reason being is that IE and MS Edge have strict JS and CSS parsers. So they might fail due to missing the SVG equivalent CSS property on that elements CSS rule in the stylesheet. Also the missing SVG equivalent attribute you are animating in the DOM on load can be affecting it. CSS transitions and CSS animations also fail when they both are missing in MS Edge.. but IE11 does not support CSS transitions or CSS animations for SVG. But you can still animate with JS in IE11 via GSAP AttrPlugin.

 

make sure you:

  • use the equivalent SVG CSS property in your stylesheet
  • use the equivalent SVG property attribute on the SVG child tag you are animating
MS IE and Edge will not render sometimes when the above are missing. That should hopefully help with IE11 and MS Edge not animating due to the missing SVG CSS properties and SVG attributes.

 

I tested on MS Edge and MS IE11 on Windows 10 (64-bit) and did not see any issues liek you described above. But that doesnt mean that those MS browsers are not buggy. I'm sure they are.. since it is a Microsoft product!

 

:)

  • Like 1
Link to comment
Share on other sites

How very interesting Jonathan,

 

I created that demo based on an issue I have with a job I am currently doing. In my job attempt the blur is going from off to on without tweening in EDGE and IE. I then, created the simple demo I attached in my previous post but did not actually test the Pen in IE or EDGE, just assumed it would behave the same way.

 

Now you tell me you saw nothing, I go back and check the Pen in my Windows machine here. Voilá the cursed thing works as expected - just like you said.

 

So, now feel like a real plonker and happy at the same time. As it works, I just need to see what is causing it not to work in my work related one.

 

Also, thanks for the Safari tip. I'll do some tests later. See my previous post now edited with my findings.

Edited by Dipscom
Link to comment
Share on other sites

Continuing with my hijack of this thread.

 

I have found why my original attempt at the motion blur did not work in EDGE or IE.

 

Look at the updated pen: 

See the Pen yJQgVO?editors=1010 by dipscom (@dipscom) on CodePen

 

Firefox, Chrome, Safari, Opera in Windows and Mac machines all play ball correctly. 

 

IE and EDGE on Windows will only tween the values correctly if you are either using a single digit stdDeviation or only tweening the first value. When you attempt to tween the second value, these browsers will simply jump the second digit to the end value and tween the first one. 

 

I do not know if this something Jack can circumvent or if this is something broken in how Microsoft's browsers calculate the filter effect.

 

In any event, we now have this knowledge here registered and no one else should lose hours banging his/her head against a wall trying to figure it out. 

 

To make sure I am testing every single avenue, Jonathan, when you say the bellow:

 

make sure you:

  • use the equivalent SVG CSS property in your stylesheet
  • use the equivalent SVG property attribute on the SVG child tag you are animating

 

I am not sure what CSS property you are suggesting here. The stdDeviation is a property attribute that I have in the SVG tag that's been animated. Is there anything else that I am not aware of?

Link to comment
Share on other sites

In your case it wont matter since the filter is within a SVG <defs> tag .. so you have to target like your doing with the AttrPlugin inside the <defs> element.

 

But SVG filters are widely supported cross browser, with IE11 being the odd man out for support of the CSS equivalent which is CSS filter property i.e. filter: blur()

 

I did not see any issues on Windows 7 and Windows 10 with SVG Gaussian Blur filter elements, so you should be fine.

Link to comment
Share on other sites

That's very bizzarre Jonathan. I am testing it here on a Windows 10 machine and two of the four examples in my Pen show the jump - the ones where I am tweening the stdDeviation with two values.

 

If someone else has a windows machine and could chime in, it would be appreciated. I believe in Jonathan's words but I also believe my eyes. At the moment, they are at odds with each other.

 

-.-

Link to comment
Share on other sites

  • 3 years later...

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