diff --git a/attr.html b/attr.html index d278573..287efb0 100644 --- a/attr.html +++ b/attr.html @@ -90,7 +90,7 @@ var myAttrTween = KUTE.to('selector', {attr: {attributeName: 75}}); var mySufAttrTween = KUTE.to('selector', {attr:{attributeName: '15%'}}); -

The Attributes Plugin does not support color attributes such as fill or stroke as well as 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.

+

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.

Attributes Namespace

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:

diff --git a/features.html b/features.html index 23d5e82..eba6c67 100644 --- a/features.html +++ b/features.html @@ -83,7 +83,7 @@

KUTE.js was developed with best practices in mind for fastest code execution and memory efficiency, but performance varies from case to case, as well as for all the other Javascript based animation engines. As a quick note on how it works, well for the most part values are cached for the entire duration of the animation so that the repetitive tasks run smoothly, uninterruptible and avoid layout thrashing. We all know the more properties used or the more elements to animate at the same time, the more power is required.

Of course some would argue on many aspects, but we all trade something for the sake of something else, such as convenience and/or flexibility or fork a project that's already great to make it.. better. For the sake of performance or simply willing to provide a feature, some trade/neglect other elements such as syncronisation (check this video), code simplicity (lots of CSS for a custom animation) and more other.

-

To learn more about how performance can vary from case to case, check out this secion, it's very informative.

+

To learn more about how performance can vary from case to case, check out this section, it's very informative.

diff --git a/svg.html b/svg.html index 9c5c63d..a9bd5c6 100644 --- a/svg.html +++ b/svg.html @@ -476,7 +476,7 @@ var tween5 = KUTE.to('selector',{strokeWidth: '10px'}); Start
-

Please note that strokeWidth is a very unique property that acts very different: when number is provided the rendered stroke will scale depending on viewBox and/or width and height, but if String is provided you can actually force the browser to scale the stroke as you like.

+

Please note that strokeWidth is a very interesting property that acts very different: when number is provided the rendered stroke will scale depending on viewBox and/or width and height, but if String is provided you can actually force the browser to scale the stroke as you like.

Now let's have a look at gradients, here we can animate the stopColor defined within the SVG's <linearGradient> element.

<linearGradient id="gradient1" x1="0%" y1="0%" x2="0%" y2="100%">
     <stop offset="0%" style="stop-color: #ffd626; stop-opacity:1"></stop>