KUTE.js Clip Property

Clip Property

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

Overview

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.

Example

A possible tween object using the property:

KUTE.to('selector',{clip:[0,150,100,0]}).start();

And a quick example here could look like this:

Start

Notes

The component will produce no effect for target elements that have overflow:visible style rule.
Also target elements without position:absolute CSS rule will produce no effect.
This property will only work with px unit for the rectangular mask, which is unfortunate.
Don't stop here, there are thankfully replacements for this property, you can simply use all kinds of SVG masks and filters in combination with the HTML Attributes component for much more animation potential and for no compromise on animation quality.
This component is bundled with the demo/src/kute-extra.js file.