Submit your widget

Varied motion blur effect with jQuery

Created 3 years ago   Views 8389   downloads 1879    Author tympanus
Varied motion blur effect with jQuery
View DemoDownload 1.0 MB
Share |

This tutorial will show you how to create a motion blur effect on HTML elements using JavaScript and an SVG blur filter.

 The demo motion blur effect and apply it to regular JS or CSS animations of HTML elements.

Motion blur is a technique widely used in motion graphics and animation in general to make movement seem more smooth and natural.

Since the regular CSS blur filter does not support directional blur, we are going to have to use SVG filters.
We’ve already covered the basics of SVG filters in the Creative Gooey Effects article.

For this effect, we will only be using the feGaussianBlur filter primitive.

<svg xmlns="" version="1.1" class="filters">
		<filter id="blur">
			<feGaussianBlur in="SourceGraphic" stdDeviation="0,0" />

The stdDeviation attribute is used to set the blur intensity, and can take up to two parameters, for blur in the horizontal and vertical orientation.

Applying the filter to an element, as we’ve seen before, is simple enough:

	-webkit-filter: url("#blur");
	filter: url("../index.html#blur");

For the motion blur effect, however, we are going to have to update the filter dynamically for every frame through JS.

First we will have to select and store the filter in a variable so that we can access it later. Since jQuery doesn’t play well with SVG elements, we need to select the element using native JS functions:

var filters = document.querySelector(".filters"), // the SVG that contains the filters
	defs = filters.querySelector("defs"), // the  element inside the SVG
	blur = defs.querySelector("#blur"), // the blur filter
	blurFilter = blur.firstElementChild; // the feGaussianBlur primitive

Read more: