Fun Web Animation Effects with KUTE.js

My aim in this article is to introduce KUTE.js, an open-source, free and feature-rich JavaScript animation engine by thednp and dalisoft.

This is the second article in the series Beyond CSS: Dynamic DOM Animation Libraries. If you'd like to read more about how best to use animation on the web or when you could consider using a JavaScript animation library instead of CSS-only animation, the first article in the series, Animating the DOM with Anime.js, contains some useful tips and resources.

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 skew and double axis scale
• All 3D transform properties except for matrix3d and rotate3d
• The following box model properties: width, height, top and left
• The color and backgroundColor properties
• Scrolling animation, both on the window object 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 margin, padding, borderWidth, etc.
• Animate the borderRadius property
• Animate text properties like fontSize, lineHeight, letterSpacing, wordSpacing, etc.
• Animate color properties like borderColor and outlineColor
• Animate the clip property, now deprecated in CSS.
• Animate the backgroundPosition property.

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%

by Maria Antonietta Perna via SitePoint