CSS Plugin

The CSS Plugin extends the KUTE.js core engine and enables animation for additional CSS properties as mentioned in the examples page. The focus is on box model properties like padding, margin or borderWidth, as well as other types of properties like borderRadius, borderColor, backgroundPosition, borderColor or clip.

Border Radius

In the example below we are doing some animation on the border-radius property. The first box animates all corners, while the other boxes animate each corner at a time. A quick reminder, for radius properties KUTE.js supports px, % and text properties' units such as em or rem.

KUTE.to('selector1',{borderRadius:'100%'}).start();
KUTE.to('selector2',{borderTopLeftRadius:'100%'}).start();
KUTE.to('selector3',{borderTopRightRadius:'100%'}).start();
KUTE.to('selector4',{borderBottomLeftRadius:'100%'}).start();
KUTE.to('selector5',{borderBottomRightRadius:'100%'}).start();

And here is how it looks like:

ALL
TL
TR
BL
BR

A quick important reminder here is that KUTE.js does not support shorthands for radius properties. Also early implementations by Mozilla's Firefox browser like -moz-border-radius-topleft are not supported because they were depracated with later versions. Download this example here.

Box Model Properties

The CSS Plugin allows KUTE.js to support almost all the box model properties, but for our example here we will focus mostly on margin and padding, as other properties such as outlineWidth, minWidth or maxHeight require a more complex context and we won't insist on them.

var tween1 = KUTE.to('selector1',{marginTop:200});
var tween2 = KUTE.to('selector1',{marginBottom:50});
var tween3 = KUTE.to('selector1',{padding:30});
var tween4 = KUTE.to('selector1',{margin:'5%'});

We're gonna chain these tweens and start the animation. You can download this example here.

BOX
 MODEL 

TIP: the width and height properties used together can be great for scale animation fallback on images for legacy browsers.

Text Properties

OK here we're gonna do a cool example for text properties. Basically the below code would work:

var tween1 = KUTE.to('selector1',{fontSize:'200%'});
var tween2 = KUTE.to('selector1',{lineHeight:24});
var tween3 = KUTE.to('selector1',{letterSpacing:50});
var tween3 = KUTE.to('selector1',{wordSpacing:50});

But our example will feature some more than just that. We're gonna animate each character of a given string, with a small delay. The heading will animate fontSize and letterSpacing properties for each character while the button will animate fontSize and lineHeight properties. Watch this:

Howdy!

Button

TIP: this should also work in Internet Explorer 8 as a fallback for scale animation for text. The above example uses some CSS hacks to enable opacity animation on IE8, so make sure to check assets/css/css.css file for more. This example is not perfect, as legacy browsers don't support the excellent transform functions with subpixel animations, but if it's a must, this would do. Download this example here.

Color Properties

The next example is about animating all border color properties, since the core engine already supports text color and backgroundColor properties. So check these lines for reference.

KUTE.to('selector1',{borderColor:'rgb(25,25,25)'}).start();
KUTE.to('selector1',{borderTopColor:'#069'}).start();
KUTE.to('selector1',{borderRightColor:'rgba(25,25,25,0.25)'}).start();
KUTE.to('selector1',{borderBottomColor:'red'}).start(); // IE9+ browsers
KUTE.to('selector1',{borderLeftColor:'#069'}).start();
KUTE.to('selector1',{outlineColor:'#069'}).start();

Let's get some animation going. Download the example here.

Colors

A quick reminder: you can also use RGB or RGBA, but the last one is not supported on IE8 and it will fallback to RGB.

Clip Property

This property allows you to animate the rectangular shape of an element that is set to position:absolute. In CSS this property works like this clip: rect(top,right,bottom,left) forming a rectangular shape that masks an element making parts of it invisible. While the clip property have been deprecated, it can still be used to emulate a scale animation for legacy browsers in certain cases.

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

A quick example here could look like this:

Note that this would produce no effect for elements that have overflow:visible style rule. Download this example here.

Background Position

Another property we can animate with KUTE.js is backgroundPosition. Quick example:

KUTE.to('selector1',{backgroundPosition:[0,50]}).start();

A working example would look like this:

Download this example here.