KUTE.js covers all animation needs by itself for transform
properties, scroll
for window or a given element, colors. Note: not all browsers support 2D transforms or 3D transforms. With the help of some plugins it also covers SVG specific properties, presentation attributes, or other CSS properties like border-radius
, clip
, backgroundPosition
and more box model properties.
Starting with KUTE.js version 1.5.0 the supported properties are split among some plugins to have a lighter core engine that gives more power to the developer. Due to it's modular coding, KUTE.js makes it easy to add support for additional properties, so check out the guide on how to extend.
All common measurement units are supported: px
and %
for translations and box-model properties, or deg
and rad
for rotations and skews, while clip
only supports px
. Other properties such as opacity
, scale
or scroll
are unitless, and background-position
always uses %
as measurement unit. As for the text properties you can use px
, em
, rem
, vh
and vw
. Be sure to check what your browsers support in terms of measurement unit.
In most cases, the best animation possible is the opacity
, for performance, aesthetics and maybe more other reasons such as avoiding unwanted layout changes. KUTE.js also covers IE8 here with the help of proprietary synthax filter: alpha(opacity=0)
. Also, opacity can be used for instance on legacy browsers that don't support RGBA
colors. Eg. opacity:0.5
will make an element semitransparent.
The core engine supports most 2D transform properties, but the most important part is that starting with KUTE.js v1.6.0 the values used for animation are always converted from percentage based translation to pixels and radians based angles to degrees, to help improve memory efficiency.
translate:150
to translate an element 150px to the right or translate:[-150,200]
to move the element to the left by 150px and to bottom by 200px. IE9+rotate:250
will rotate an element clockwise by 250 degrees. IE9+skewX:25
will skew an element by 25 degrees. IE9+skewY:25
will skew an element by 25 degrees. IE9+scale:2
will enlarge an element by a degree of 2. IE9+The core engine supports all 3D transform properties except matrix3d
and rotate3d
. Just as the above, these properties' values are also converted to traditional pixels and degrees measurements to help improve memory usage.
translateX:150
to translate an element 150px to the right. IE10+translateY:-250
to translate an element 250px towards the top. IE10+translateZ:-250
to translate an element 250px to it's back, making it smaller. Requires a perspective
tween option to be used; the smaller perspective value, the deeper translation. IE10+translate3d:[-150,200,150]
to translate an element 150px to the left, 200px to the bottom and 150px closer to the viewer, making it larger. Also requires using a perspective
tween option. IE10+rotateX:250
will rotate an element clockwise by 250 degrees. Requires perspective. IE10+rotateY:-150
will rotate an element counter-clockwise by 150 degrees. Requires perspective. IE10+rotateZ:-150
will rotate an element counter-clockwise by 150 degrees. IE10+The SVG Plugin features cross browser 2D transform animations via the svgTransform tween property and the transform
presentation attribute, similar in functionality as the Attributes Plugin.
translate:150
to translate a shape 150px to the right or translate:[-150,200]
to move the element to the left by 150px and to bottom by 200px. IE9+rotate:150
will rotate a shape clockwise by 150 degrees or rotate: [45,25,25]
to rotate the shape by 45 degrees around the [25,25] coordinate of the parent <svg>
. IE9+skewX:25
will skew a shape by 25 degrees. IE9+skewY:25
will skew a shape by 25 degrees. IE9+scale:0.5
will scale down a shape to half of it's initial size. IE9+The SVG Plugin can animate the d
attribute of a given <path>
or <glyph>
element with the tween property called path. The animation effect is widelly known as morph SVG and implemented in various scripts, but the KUTE.js implementation is similar to the D3.js examples for wider usability.
Further more, the SVG Plugin can animate the stroke in a way that you probably know as drawSVG
. KUTE.js implements it as draw tween property that deals with the well known CSS properties: strokeDasharray and strokeDashoffset.
The core engine supports width
, height
, left
and top
while the CSS Plugin adds support for all other box-model properties.
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.scale
on IE8 again, as well as for other purposes.margin: "20px 50px"
or any other type are not supported.outline-width
of an element.As a quick side note, starting with KUTE.js v1.6.0 the core engine supported box model properties values are converted from percent based into pixel based values, using the element.offsetWidth
as a refference. The idea is the same as presented on the above supported transform properties.
Remember: these properties are layout modifiers that may force repaint of the entire DOM, drastically affecting performance on lower end and mobile devices. They also trigger resize
event that may cause crashes on old browsers such as IE8 when using handlers bound on resize
, so use with caution.
The CSS Plugin covers all the radius properties while making sure to use the proper vendor prefix if a slightly older browser version is detected.
border-radius
on all corners for a given element.border-top-left-radius
for a given element.border-top-right-radius
for a given element.border-bottom-left-radius
for a given element.border-bottom-right-radius
for a given element.For all radius properties above borderRadius:20
or borderTopLeftRadius:'25%'
will do. In the first case px
is the default measurement unit used, while in the second we require using %
unit which is relative to the element's size.
Remember: shorthands for border-radius
are not supported. Also KUTE.js does not cover early implementations by Mozilla Firefox (Eg. -moz-border-radius-topleft
) as they were deprecated with later versions.
The core engine only supports color
and backgroundColor
, but the CSS Plugin covers all the others. KUTE.js currently supports values such as HEX
, RGB
and RGBA
for all color properties, but IE8 does not support RGBA
and always uses RGB
when detected, otherwise will produce no effect. There is also a tween option keepHex:true
to convert the color format. Eg. color: '#ff0000'
or backgroundColor: 'rgb(202,150,20)'
or borderColor: 'rgba(250,100,20,0.5)'
. The IE9+ browsers should also work with web safe colors, eg. color: 'red'
.
background-color
for a given element.outline-color
for a given element.border-color
on all sides for a given element.Remember: shorthands for borderColor
property are not supported.
The Attributes Plugin can animate any numerical presentation attribute such as width, cx or stop-opacity, but the values can be also suffixed: 150px
or 50%
, and for that you must always provide a string value that include the measurement unit, and that, of course, depends on the attribute. This plugin can be a great addition to the above SVG Plugin for specific gradient attributes or specific geometric shapes' attributes.
The synthax is slightly different to make sure we don't mess up with CSS properties that have the same name because the presentation attribute may be a unitless attribute while the CSS property might require a suffix (%,px,etc). For instance KUTE.to('selector', {attr:{width:150}})
is clearly different from KUTE.to('selector', {width:150})
which is the the CSS property with the same name.
Starting KUTE.js 1.6.0 the Attributes Plugin can also animate color attributes such as stroke, fill or stop-color, and they are removed from the SVG Plugin, and the reason for that is the new bundle build that incorporates both plugins into an unified file.
The plugin handles attribute namespaces properly which means you can use both Javascript notation (like stopColor) and HTML markup notation (like 'stop-color'), see the below example.
EG: KUTE.to('selector', {attr:{stroke:'blue'}})
to animate the stroke of an SVG element or KUTE.to('selector', {attr:{'stop-color':'red'}})
to animate the stop color of some SVG gradient.
The CSS Plugin also cover the text properties, and these can be combinated with each other when applied to text elements (paragraphs, headings) as animation fallback for scale
on browsers that don't support transform
at all. Yes, IE8 and other legacy browsers.
font-size
for a given element.line-height
for a given element.letter-spacing
for a given element.word-spacing
for a given element.Remember: these properties are layout modifiers.
KUTE.js core engine currently supports only vertical scroll for both the window and a given element that's scrollable (when scrollHeight
is higher than offsetHeight
). Both scroll: 150
or scrollTop: 150
notations will do. When animating scroll, KUTE.js will disable all scroll and swipe handlers to prevent animation bubbles as well as scroll bottlenecks.
innerHTML
for a given target. Eg. number:1500
text: 'A demo with <b>substring</b>'
. See Text Plugin for details.
clip
property for a given element. Only rect is supported. Eg. clip:[250,200,300,0]
. See spec for details.background-position
for a given element that uses a background image. It only uses % as measurement unit. Eg. backgroundPosition:[50,20]
Make sure you go to the issues tracker and report the missing property ASAP, or you can check the extend guide and learn how to develop a plugin to support a new property yourself.