Clip Property

The component that animates the CSS clip property of a target element on most browsers.


Animate the clip property of a target element when certain conditions are met.

The KUTE.js Clip Property component enables animation for the CSS clip property on most browsers.

What exactly does it do? Well you can animate the visible rectangular shape of an element that is set to position:absolute. If conditions are not met (more conditions apply, see notes below), the component will update the target element, but the effect is not visible.

Generally you can set the CSS rule for this property like this clip: rect(top,right,bottom,left) which forms a rectangular masking shape above a target element making parts of it invisible.

While the CSS clip property has been deprecated, it can still be used to emulate a type of scale/reveal animation for legacy browsers in certain cases.

This component is bundled with the demo/src/kute-extra.js file.


A possible tween object using the property:'selector',{clip:[0,150,100,0]}).start();

And a quick example here could look like this: