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