Filter Effects

The component that animates the CSS3 filter property for specific Element targets on modern browsers.


Animate filter functions for a target Element and deliver the best possible animation.

The KUTE.js Filter Effects component provides support for the CSS3 filter property on modern browsers.

The component covers all filter functions, except that the url() function cannot be animated, however the component will try and keep it's value into the target element styling at all times.

Similar to the Transform Functions and the Transform Matrix components, this component will try and keep same order of the filter functions, regardless of the input order, and the reason is that chained animations can have some unwanted janky artifact effects.

Most values are in [0-Infinity] range and the presentation is delivered with % suffixed values, except blur() which uses px as unit/suffix.

Filter Functions


Let's have a look at some sample tween objects and a quick example:

let fe1 ='selector1', {filter :{ blur: 5 }})
let fe2 ='selector2', {filter :{ sepia: 50, invert: 80 }})
let fe3 ='selector3', {filter :{ saturate: 150, brightness: 90 }})
let fe4 ='selector4', {filter :{ url: '#mySVGFilter', opacity: 40, dropShadow:[5,5,5,'olive'] }})