Fun Web Animation Effects with KUTE.js
What Can You Do with KUTE.js?
KUTE.js makes available a core animation engine and a number of plugins to animate specific kinds of properties. This modular architecture helps to keep this library performant and highly flexible.
What You can Animate with the KUTE.js Core Engine
Just using the core engine alone, you can animate:
- Opacity property
All 2D transform properties, except for
matrix, double axis
skewand double axis
All 3D transform properties except for
The following box model properties:
Scrolling animation, both on the
windowobject and on any scrollable DOM element
What You Can Animate with the KUTE.js CSS Plugin
Using the CSS plugin the number of possibilities for animation go up. Here’s what you can do:
Animate all box model properties like
Animate text properties like
Animate color properties like
clipproperty, now deprecated in CSS.
What You Can Animate with the KUTE.js SVG Plugin
SVG (Scalable Vector Graphics) illustrations and icons are all over the web. This is not by chance. SVG graphics look great whatever the screen resolution, being written in a markup language makes them more accessible, and when properly optimized, can have a small filesize.
One awesome thing you can do with an SVG graphic is animating different parts of it, and KUTE.js offers a great plugin that lets you achieve sophisticated animations without much effort.
In particular, the SVG plugin of KUTE.js lets you :
- Morph SVG paths
- Animate the SVG stroke attribute
- Animate SVG transforms in a reliable, cross-browser way
What You Can Animate with the KUTE.js Attributes Plugin
With the Attributes plugin, KUTE.js lets you animate any numeric presentation attribute, with or without a unit of measurement like px, em, etc. This plugin, in conjunction with the SVG plugin, makes possible the creation of some cool animations.
What You Can Animate with the KUTE.js Text Plugin
Extending KUTE.js with the Text plugin will let you animate text elements in two ways:
- Increasing and decreasing the string representation of a number
- Writing a string a character at a time.
Visit the dedicated page on the KUTE.js website for full details about its capabilities:
Continue reading %Fun Web Animation Effects with KUTE.js%