Box Model

The component that animates most of the CSS box model properties of a target element on all browsers.


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

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.


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

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

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