Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from http://thednp.github.io/kute.js/htmlAttributes.html below:

Website Navigation

• KUTE.js

KUTE.js HTML Attributes

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

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

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.

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

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.

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:

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

• 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.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4