The KUTE.js Attributes Plugin extends the core engine and enables animation for any numeric presentation attribute, with or without a measurement unit or what we know as suffix. The plugin can be a great asset for creating complex animations in combination with the SVG Plugin as we'll see in the following examples. As a quick refference, the basic synthax goes like this:
// basic synthax for unitless attributes
var myAttrTween = KUTE.to('selector', {attr: {attributeName: 75}});
// OR for attributes that are ALWAYS suffixed / have a measurement unit
var mySufAttrTween = KUTE.to('selector', {attr:{attributeName: '15%'}});
The Attributes Plugin does support color attributes such as fill or stroke starting with KUTE.js v1.5.8, but doesn't support attributes with multiple values like stroke-dasharray, viewBox or transform for simplicity reasons. To animate the stroke/fill or transform attribute, the SVG Plugin has some handy solutions for you. Despite the limitations of this plugin, you have access to just
about any SVGElement/Element presentation attribute available.
Starting with KUTE.js version 1.5.5, the Attributes Plugin can handle all possible single value attributes with both dashed string and non-dashed string notation. Let's have a look at an example so you can get the idea:
// dashed attribute notation
var myDashedAttrStringTween = KUTE.to('selector', {attr: {'stroke-width': 75}});
// non-dashed attribute notation
var myNonDashedAttrStringTween = KUTE.to('selector', {attr:{strokeWidth: '15px'}});
The strokeWidth example is very interesting because this attribute along with many others can work with px, % or with no unit/suffix.
Starting with KUTE.js version 1.5.7, the Attributes Plugin can also animate color attributes: fill, stroke and stopColor. If the elements are affected by their CSS counterparts, the effect is not visible,
so always make sure you know what you're doing.
// some fill rgb, rgba, hex
var fillTween = KUTE.to('#element-to-fill', {attr: { fill: 'red' }});
// some stopColor or 'stop-color'
var stopColorTween = KUTE.to('#element-to-do-stop-color', {attr: {stopColor: 'rgb(0,66,99)'}});
If in this example the fill attribute value would reference a gradient, then rgba(0,0,0,0) is used.
In the first example, let's play with the attributes of a <circle> element: radius and center coordinates.
// radius attribute
var radiusTween = KUTE.to('#circle', {attr: {r: 75}});
// coordinates of the circle center
var coordinatesTween = KUTE.to('#circle', {attr:{cx:0,cy:0}});
A quick demo with the above:
Similar to the example on gradients with SVG Plugin, we can also animate the gradient positions, and the plugin will make sure to always include the suffix for you, as in this example the % unit
is found in the current value and used as unit for the DOM update:
// gradient positions to middle
var closingGradient = KUTE.to('#gradient', {attr: {x1:'49%', x2:'49%', y1:'49%', y2:'49%'}});
// gradient positions rotated
var rotatingGradient = KUTE.to('#gradient', {attr: {x1:'49%', x2:'51%', y1:'51%', y2:'51%'}});
This plugin is quite handy and a great addition to the SVG Plugin.