KUTE.js Box Model

Overview

Animate the width, height, borderWidth or spacing for a target element on all browsers.

The KUTE.js Box Model component provides support for all box-model properties and all their variations.

Unlike other components, this one only works with px measurement unit, simply because these properties have no control at subpixel level. This means that even if you use % as suffix, the computed values are still pixel based in all browsers.

Because modern browsers shine with transform animations and box model properties generally come with performance penalties and other animation jank, they can be used as fallback for legacy browsers, for your very special clients of course.

Box Model Properties

left, top, right and bottom are position based properties for movement on vertical and / or horizontal axis. These properties require that the element to animate uses position: absolute/relative styling as well as it's parent element requires position:relative. These properties can be used as fallback for browsers with no support for translate properties such as IE8.
width, height, minWidth, minHeight, maxWidth, maxHeight are properties that allow you to animate the size of an element on horizontal and / or vertical axis. These properties can be used on images as fallback for scale on IE8 again, as well as for other purposes.
padding, margin, paddingTop, paddingBottom, paddingLeft, paddingRight, marginTop, marginBottom, marginLeft and marginRight are properties that allow you to animate the spacing of an element inside (via padding) and outside (via margin).
borderWidth, borderTopWidth, borderRightWidth, borderBottomWidth are borderLeftWidth are properties that allow you to animate the border of an element either on all sides at once or each side separatelly.
outlineWidth property allows you to animate the outline-width of an element.

The properties marked with different color, namely left, top, width and height are part of a lighter version of the component called baseBoxModel.js, since they're the most used and probably most needed in just about every KUTE.js distribution.

Examples

OK let's have a look at some sample tween objects and a quick demo:

let tween1 = KUTE.to('selector1',{width:200})
let tween2 = KUTE.to('selector1',{height:300})
let tween3 = KUTE.to('selector1',{left:250})
let tween4 = KUTE.to('selector1',{top:100})
let tween5 = KUTE.to('selector1',{marginTop:200})
let tween6 = KUTE.to('selector1',{marginBottom:50})
let tween7 = KUTE.to('selector1',{padding:30})
let tween8 = KUTE.to('selector1',{margin:'5px'})

We're gonna chain these tweens and start the animation.

BOX
MODEL

Start

Notes

Shorthand notations such as margin: "20px 50px" or any other property are not supported.
Most box-model properties (except top, left, bottom and right) are layout modifiers and will not produce the best visual experience mainly because they force re-paint on all page layout and they don't support animation under the pixel level.
The baseBoxModel component is featured in all distributions, while the full component is bundled with demo/src/kute-extra.js file.