KUTE.js Filter Effects

Filter Effects

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

Overview

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

url() function links an element to an SVG filter, the function is supported to keep it's value into the target element's style in case it's set initially or you want to set it yourself.
opacity() can animate the opacity for a target element in the 0-100% range. Default is 100%.
blur() can animate the blur for a target element in the 0-Infinity range. Default is 0px and the unit is always px.
saturate() can animate the color saturation for a target element in the 0-Infinity range. Default is 100%.
grayscale() can animate the color desaturation for a target element in the 0-100% range. Default is 0%.
brightness() can animate the brightness for a target element in the 0-Infinity range. Default is 100%.
contrast() can animate the contrast for a target element in the 0-Infinity range. Default is 100%.
sepia() can animate the sepia filter for a target element in the 0-100% range. Default is 0%.
invert() can animate the color inversion for a target element in the 0-100% range. Default is 0%.
hueRotate() can animate the color hue rotation for a target element in the 0-Infinity range. Default is 0deg.
dropShadow() can animate the shadow and all related parameters for a target element. Default is [0,0,0,'black']

Examples

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

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

FE1

FE2

FE3

FE4

Start

Notes

The CSS filter property is supported on all major browsers nowadays, but it's better to check and double check.
This component can be a great addition to all SVG related components, especially because the dropShadow provides a better experience than boxShadow, as shown here.
Since this component can work with the url() function the way it does, the HTML Attributes component will complement greatly for even more animation potential.
Similar to the HTML Attributes component, this one can also deal with specific function namespace, for instance hue-rotate and hueRotate.
This component is bundled with the demo/src/kute-extra.js file.