KUTE.to('selector1',{borderColor:'rgb(25,25,25)'}).start();
KUTE.to('selector1',{borderTopColor:'#069'}).start();
KUTE.to('selector1',{borderRightColor:'rgba(25,25,25,0.25)'}).start();
-KUTE.to('selector1',{borderBottomColor:'#069'}).start();
+KUTE.to('selector1',{borderBottomColor:'red'}).start(); // IE9+ browsers
KUTE.to('selector1',{borderLeftColor:'#069'}).start();
KUTE.to('selector1',{outlineColor:'#069'}).start();
For some reasons these methods aren't included into the core/plugins by default, but let you decide what you need and how to customize the animation engine for your very secific need.
diff --git a/properties.html b/properties.html index e0b557e..75c9ba6 100644 --- a/properties.html +++ b/properties.html @@ -92,8 +92,8 @@rotate:250 will rotate an element clockwise by 250 degrees. Supported on IE9.skewX:25 will skew an element by 25 degrees. Supported on IE9.skewY:25 will skew an element by 25 degrees. Supported on IE9.scale:2 will enlarge an element by a degree of 2. Supported on IE9.scale:2 will enlarge an element by a degree of 2. Supported on IE9.rotateX:250 will rotate an element clockwise by 250 degrees. Modern browsers only and requires perspective.rotateY:-150 will rotate an element counter-clockwise by 150 degrees. Modern browsers only and also requires perspective.rotateZ:-150 will rotate an element counter-clockwise by 150 degrees. Modern browsers only and doesn't require perspective.Make sure you go to the issues tracker and report the missing property ASAP.
+Make sure you go to the issues tracker and report the missing property ASAP, or you can check the extend guide and learn how to develop a plugin to support a new property yourself.
The SVG Plugin for KUTE.js extends the core engine and enables animation for various CSS properties specific to SVG elements as well as morphing path shapes. We'll dig into this in great detail as well as provide valuable tips on how to configure your animation for best performance and visual aesthetics. The SVG Plugin is very light, maybe one of the lightest out there, still, you will find it to be very powerful and flexible.
-Keep in mind that older browsers like Internet Explorer 8 and below as well as stock browser from Android 4.3 and below do not support inline SVG.
+Keep in mind that older browsers like Internet Explorer 8 and below as well as stock browser from Android 4.3 and below do not support inline SVG so make sure to fiter out your SVG tweens.
One of the most important parts of the plugin is the shape morphing capability. It only applies to inline <path> and <glyph> SVG elements, with closed shapes (their d attribute ends with z). The plugin is packed with specific tween options to help you improve the morph animation:
One of the most important parts of the plugin is the shape morphing capability. It only applies to inline <path> and <glyph> SVG elements, with closed shapes (their d attribute ends with z). On initialization or animation start, depending on the chosen KUTE.js method, it will sample a number of points along the two paths based on a default / given sample size and will create two arrays with these points, the arrays that we need for interpolation. Further more, with a set of options we can then rearrange / reverse these arrays to optimize and / or maximize the visual effect of the morph:
true the script will log valuable information about the morph such as default/current sample size, number of points based on sample size, the recommended index for points rotation, or if one of the shapes require to be reversed. By default this option is false for serious performance reasons.true the script will log valuable information about the morph such as default/current sample size, number of points based on sample size, the recommended index for points rotation, or if one of the shapes require to be reversed. By default this option is false for serious performance reasons. This option will also show you the first point for both shapes so you can visualizetrue this option allows you to reverse the draw direction of the FIRST shape. By default this option is false.For all the above tween objects the animation should look like this:
+For all the above tween objects the animation should look like this:
-As you can see, the animation could need some fine tunning. Let's open the console, and this time we'll pass in the showMorphInfo: true tween option that will help us find the best possible morph as performance and visual. Have a look:
As you can see, the animation could need some fine tunning. Let's open the console, and this time we'll pass in the showMorphInfo: true tween option that will help us find the best possible morph as performance and visual. Have a look:
// let's check the morph info again
var tween = KUTE.to('#rectangle', { path: '#star' }, {showMorphInfo: true}).start();
@@ -141,23 +141,54 @@ If the current animation is not satisfactory, consider reversing one of the path
*/
Next, we're going to set the morphIndex: 79 and we will get an improved morph.
Much better! You can play with morphIndex value, maybe you can get an even better or more interesting morph.
Next, we're going to set the morphIndex: 79 option and we will get an improved morph.
Much better! You can play with the morphIndex value, maybe you can get an even better or more interesting morph. Also notice the above shapes have some points indicating the start for each shape, making it even easier for you to improve the morph, a nice addition to the showMorphInfo option.
When your paths are only lineto, vertical-lineto and horizontal-lineto based shapes (the d attribute consists of L, V and H path commands), the SVG Plugin will work differently: it will use their points instead of sampling new ones. As a result, we boost the visual and maximize the performance. The morphPrecision option will not apply since the paths are already polygons, still you will have access to all the other options.
// let's morph a triangle into a star
+var tween1 = KUTE.to('#triangle', { path: '#star' }).start();
+
+// or same path into a square
+var tween2 = KUTE.to('#triangle', { path: '#square' }).start();
+In the example below the triangle shape will morph into a square, then the square will morph into a star, so 2 tweens chained with a third that will morph back to the original triangle shape. For each tween the morph will use the number of points from the shape with most points as a sample size for the other shape. Let's have a look at the demo.
+The morph for polygon paths is the best morph in terms of performance so it's worth keeping that in mind. Also using paths with only L path command will make sure to prevent value processing and allow the animation to start as fast as possible.
In other cases, you may want to morph multiple paths at the same time. Let's have a look at the following paths:
+In other cases, you may want to morph paths that have subpaths. Let's have a look at the following paths:
<svg id="multi-morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
<path d="M206.115,255.957c-23.854-12.259-47.043-18.479-68.94-18.479c-2.978,0-5.976,0.09-8.974,0.354 c-27.94,2.312-53.461,9.684-69.875,15.414c-4.354,1.599-8.817,3.288-13.415,5.152L0,414.096 c30.851-11.416,58.146-16.969,83.135-16.969c40.423,0,69.764,15.104,93.996,30.652c11.481-38.959,39.022-133.045,47.241-161.162 C218.397,262.975,212.334,259.332,206.115,255.957z
M264.174,295.535l-45.223,157.074c13.416,7.686,58.549,32.024,93.105,32.024 c27.896,0,59.127-7.147,95.417-21.896l43.179-150.988c-29.316,9.461-57.438,14.26-83.732,14.26 C318.945,326.01,285.363,310.461,264.174,295.535z
@@ -169,7 +200,7 @@ If the current animation is not satisfactory, consider reversing one of the path
M192 471.918l-191.844-26.297-0.010-157.621h191.854z"/>
</svg>
As you can see, both these paths have additional subpaths, and KUTE.js will only animate the first of both in this case. To animate them all, we need to break them into multiple paths, so we can handle each path morph properly.
+As you can see, both these paths have subpaths, and KUTE.js will only animate the first of both in this case. To animate them all, we need to break them into multiple paths, so we can handle each path morph properly.
<svg id="multi-morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
<path id="w11" d="M206.115,255.957c-23.854-12.259-47.043-18.479-68.94-18.479c-2.978,0-5.976,0.09-8.974,0.354 c-27.94,2.312-53.461,9.684-69.875,15.414c-4.354,1.599-8.817,3.288-13.415,5.152L0,414.096 c30.851-11.416,58.146-16.969,83.135-16.969c40.423,0,69.764,15.104,93.996,30.652c11.481-38.959,39.022-133.045,47.241-161.162 C218.397,262.975,212.334,259.332,206.115,255.957z"/>
<path id="w12" d="M264.174,295.535l-45.223,157.074c13.416,7.686,58.549,32.024,93.105,32.024 c27.896,0,59.127-7.147,95.417-21.896l43.179-150.988c-29.316,9.461-57.438,14.26-83.732,14.26 C318.945,326.01,285.363,310.461,264.174,295.535z"/>
@@ -182,7 +213,7 @@ If the current animation is not satisfactory, consider reversing one of the path
<path id="w24" style="visibility:hidden" d="M192 471.918l-191.844-26.297-0.010-157.621h191.854z"/>
</svg>
After a close inspection we determined that paths are not ordered the same so it seems we need to tween the paths in a way that their points travel the least possible distance, as follows: w11 to w24, w13 to w21, w14 to w22 and w12 to w23.
+After a close inspection we determined that paths are not ordered the same so it seems we need to tween the paths in a way that their points travel the least possible distance, as follows: #w11 to #w24, #w13 to #w21, #w14 to #w22 and #w12 to #w23.
Now we can write the tween objects and get to working:
var multiMorph1 = KUTE.to('#w11', { path: '#w24' }).start();
var multiMorph2 = KUTE.to('#w13', { path: '#w21' }).start();
@@ -190,30 +221,38 @@ var multiMorph3 = KUTE.to('#w14', { path: '#w22' }).start();
var multiMorph3 = KUTE.to('#w12', { path: '#w23' }).start();
As you can imagine, it's quite hard if not impossible to code something that would do all this work automatically, so after a few minutes of tweaking the options, here's what we should see:
+As you can imagine, it's quite hard if not impossible to code something that would do all this work automatically, so after a minute or two tweaking the options, here's what we should see:
-This final touch required using reverseSecondPath:true option for all tweens because each shape have a slightly different position from its corresponding shape, so make sure to check the svg.js for a full code review.
Note that this final touch required using reverseSecondPath:true option for all tweens because each shape have a slightly different position from its corresponding shape, so make sure to check the svg.js for a full code review.
The last morph example is a bit more complex as the paths have subpaths with different positions and other important differences such as having different amounts of subpaths. In that case you have to manually clone one or more paths in a way that the number of starting shapes is equal to the number of ending shapes, as well as making sure the starting shapes are close to their corresponding end shapes; at this point you should be just like in the previous example. So without further talking, let's get into it:
+The last morph example is a bit more complex as the paths have subpaths with different positions and other important differences such as having different amounts of subpaths as well as significant differences of their positions. In this case you have to manually clone one or more paths in a way that the number of starting shapes is equal to the number of ending shapes, as well as making sure the starting shapes are close to their corresponding end shapes; at this point you should be just like in the previous example.
+An important aspect of multi path morph is syncronization: since the .to() method will prepare the paths for interpolation at animation start, and this usually takes a bit of time, the problem can be easily solved as always using the .fromTo() method. So, let's get into it:
// complex multi morph, the paths should be self explanatory
+var morph1 = KUTE.fromTo('#start-container', { path: '#start-container' }, { path: '#end-container' });
+var morph2 = KUTE.fromTo('#startpath1', { path: '#startpath1' }, { path: '#endpath1' });
+var morph3 = KUTE.fromTo('#startpath1-clone', { path: '#startpath1-clone' }, { path: '#endpath1' });
+var morph4 = KUTE.fromTo('#startpath2', { path: '#startpath2' }, { path: '#endpath2' });
+As with the previous example, you should change which path will morph to which path so that their points travel the least possible distance and the morph animation looks visually appealing.
While there are other tools such as SVGMorpheus to enable this kind of multi-path morph, they lack in options to improve the visual and performance. The demos look acceptable in most cases, but the SVGs were manually prepared/optimized which makes it pretty much unusable on a broader horizon. Again, the SVG Plugin for KUTE.js uses approximatelly the same algorithm as D3.js for determining the coordinates for tween, it's super light, it's a better solution.
+While there are other tools such as SVGMorpheus to enable this kind of multi-path morph, they lack in options to improve the visual and performance. The demos look acceptable in most cases, but the SVGs were manually prepared/optimized which makes it pretty much unusable on a broader scope. The SVG Plugin for KUTE.js uses approximatelly the same algorithm as D3.js for determining the coordinates for tween, it's super light, it's a better solution.
morphPrecision value (1-10) would be required, assuming performant hardware are powering the displays. For small displays you can get quite comfortable with almost any value, including the default value.lineto path commands are best for performance.showMorphInfo:true tween option to check how the values required for the morph change with every new option value, but never forget to disable it after you have optimized the morph to your liking, this option enables a function that detects the best index for points rotation that is very expensive and delays the animation for quite some time..to() and .fromTo() methods because the processing of the two paths happens on tween start delaying the animation, so keep that in mind when working with syncing multiple tweens, the morph will always start later..to() and .fromTo() methods, but the ones that use the second method will start faster, because the values have been prepared already and for the first method the processing of the two paths happens on tween start delaying the animation, so keep that in mind when working with syncing multiple tweens, the .to() based morph will always start later. Of course this assumes the you cache the tween objects first and start the animation later, if not (you start the animation on object creation), both methods will be delayed.The SVG Plugin can be combined with the Attributes Plugin to enable even more advanced/complex animations for SVG elements.
+The SVG Plugin can be combined with the Attributes Plugin to enable even more advanced/complex animations for SVG elements.
+ +The future versions of the SVG Plugin might also feature improved cross browser transform animations, as currently the core engine only works and was tested with HTML elements of most types except SVG.
+Since most of this plugin scripting works with path or glyph elements, I'm also considering a very light convertToPath feature, but there are some already out there.