Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
scubajosh

Motion Blur Plugin for Javascript

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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Unfortunately IE9 doesn't support that blur CSS filter.. 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Got an SVG motion blur working with TweenLite (albeit super sloppy, can certainly be cleaned up. Still transitioning from Flash!) >

See the Pen YXBRXM by Davi-T (@Davi-T) on CodePen


 

  • Like 3

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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

 

See the Pen pqdni 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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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?

Share this post


Link to post
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.

Share this post


Link to post
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.

 

-.-

Share this post


Link to post
Share on other sites

I'm seeing the jump on both Win 10 Edge and Win 7  IE 11.

 

All other browsers on both machines are fine.

  • Like 1

Share this post


Link to post
Share on other sites

it could be a specific brand of graphics card.. since other are seeing it and others not on Windows 7 & 10 .. I have AMD Radeon and I don't see any issue.

Share this post


Link to post
Share on other sites

I have NVIDIA cards in both of my test machines.

Share this post


Link to post
Share on other sites

Mine's also a NVIDIA.

 

Interesting... It is starting to look like another graphics card issue. Would be great to have more data points. Will see if I can find more people to report on this.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×