## HTML Attributes

The component that animates color attributes or any single value presentation attribute of a target element on most browsers.

### Overview

Animate a wide variety of presetantion attributes of a target element.

The KUTE.js HTML Attributes component enables animation for any numeric presentation attribute, with or without a measurement unit / suffix as well as specific color attributes.

The component can be a great asset for creating complex animations in combination with the SVG components as we'll see in the following examples.

The component doesn't support attributes with multiple values like stroke-dasharray, viewBox or transform for specific reasons. To animate the stroke related attributes, the SVG Draw component is the tool for you, while for transform you have the SVG Transform component and the Transform Matrix component.

Despite the "limitations" of this component, you have access to just about any SVGElement or Element presentation attribute available.

### General Usage

    // basic notation for unitless attributes
    var myAttrTween = KUTE.to('selector', {attr: {attributeName: 75}});

    // OR for attributes that are ALWAYS suffixed / have a measurement unit
    var mySuffAttrTween = KUTE.to('selector', {attr:{attributeName: '15%'}});

### Attributes Namespace

The HTML Attributes component can handle all possible single value presentation attributes with both dashed string and camel-case notation. Let's have a look at a sample notation 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` attribute is very interesting because it can work with `px`, `%` or with no unit/suffix. In this case, and in any context, the component will always work with the attribute's current value suffix to eliminate any possible janky animation.

### Examples

#### Color Attributes

The HTML Attributes component can also animate color attributes: `fill`, `stroke` and `stopColor`. If the elements are affected by their CSS counterparts, the effect is not visible, you need to make sure that doesn't happen.

    // 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)'}});

Start

If in this example the `fill` attribute value would reference a gradient, then rgba(0,0,0,0) is used. Keep in mind that the component will not work with combined fill values like `url(#pattern) rgba()`, you are better of only using the `url(#pattern)` and use other attributes to control directly the animation of that linked pattern, just like in the last example below.

#### Unitless Attributes

In the next 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:

Start

#### Suffixed Attributes

Similar to the example on circle attributes, we can also animate the gradient positions but this time with a specific to gradients suffix, and the component 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%'}});

Start

### Notes

- The power of this little gem comes from the fact that it can work with internally undefined/unknown attributes, as well as with attributes that are not yet present in the W3 draft. As long as you provide valid values specific to the attribute, the component will assign an update function and will always double check for the current value to determine if it needs a suffix or if the attribute name needs adjustments (EG: `fillOpacity` becomes `fill-opacity`).
- This component is a great addition to complement any SVG related component as well as a great complement to Filter Effects component.
- Remember to check your elements markup for changes, your animation might not be visible because equivalent CSS is used.
- This component is bundled with the standard kute.js distribution file and the demo/src/kute-extra.js file.