167 lines
8 KiB
HTML
167 lines
8 KiB
HTML
<!DOCTYPE html>
|
|
<!--[if IE 7]><html class="ie ie7" lang="en"><![endif]-->
|
|
<!--[if IE 8]><html class="ie ie8" lang="en"><![endif]-->
|
|
<!--[if IE 9]><html class="ie ie9" lang="en"><![endif]-->
|
|
|
|
<!--[if gte IE 10 | !IE ]><!--> <html lang="en"> <!--<![endif]-->
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="The Attributes Plugin for KUTE.js enables animation for any numeric presentation attribute.">
|
|
<meta name="keywords" content="kute,kute.js,animation,javascript animations,tweening engine,animation engine,presentation attributes,Javascript,Native Javascript,vanilla javascript,jQuery">
|
|
<meta name="author" content="dnp_theme">
|
|
<link rel="shortcut icon" href="./assets/img/favicon.png"> <!-- TO DO -->
|
|
|
|
<title>KUTE.js Attributes Plugin | Javascript Animation Engine</title>
|
|
|
|
<!-- RESET CSS -->
|
|
<link type="text/css" href="./assets/css/reset.css" rel="stylesheet">
|
|
|
|
<!-- DEMO KUTE CSS -->
|
|
<link type="text/css" href="./assets/css/kute.css" rel="stylesheet">
|
|
|
|
<!-- Ion Icons -->
|
|
<link type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
|
|
|
|
<!-- Synthax highlighter -->
|
|
<link href="./assets/css/prism.css" rel="stylesheet">
|
|
|
|
<!-- Polyfill -->
|
|
<script src="./assets/js/minifill.js"> </script>
|
|
|
|
<!-- legacy browsers support via polyfill
|
|
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script> -->
|
|
<!--[if IE]>
|
|
<script src="https://cdn.jsdelivr.net/minifill/0.0.2/minifill.min.js"> </script>
|
|
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
|
<![endif]-->
|
|
</head>
|
|
|
|
<body>
|
|
<div class="fill overlay"></div>
|
|
|
|
<div class="site-wrapper">
|
|
|
|
<div class="navbar-wrapper">
|
|
<div class="content-wrap">
|
|
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
|
<ul class="nav">
|
|
<li class="btn-group"><a href="#" data-function="toggle">Features <span class="caret"></span></a>
|
|
<ul class="subnav">
|
|
<li><a href="features.html">Feature Overview</a></li>
|
|
<li><a href="properties.html">Supported Properties</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="btn-group active">
|
|
<a href="#" data-function="toggle">Examples <span class="caret"></span></a>
|
|
<ul class="subnav">
|
|
<li><a href="examples.html">Core Engine</a></li>
|
|
<li><a href="css.html">CSS Plugin </a></li>
|
|
<li><a href="svg.html">SVG Plugin </a></li>
|
|
<li><a href="text.html">Text Plugin </a></li>
|
|
<li class="active"><a href="attr.html">Attributes Plugin </a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="btn-group">
|
|
<a href="#" data-function="toggle">API <span class="caret"></span></a>
|
|
<ul class="subnav">
|
|
<li><a href="start.html">Getting Started</a></li>
|
|
<li><a href="api.html">Public Methods</a></li>
|
|
<li><a href="options.html">Tween Options</a></li>
|
|
<li><a href="easing.html">Easing Functions</a></li>
|
|
<li><a href="extend.html">Extend Guide</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="about.html">About</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-wrap">
|
|
<h2>Attributes Plugin</h2>
|
|
<p>The KUTE.js Attributes Plugin extends the core engine and enables animation for any numeric presentation attribute, with or without a measurement unit or what we know as suffix. The plugin can be a great asset for creating complex animations in combination with the <a href="svg.html">SVG Plugin</a> as we'll see in the following examples. As a quick refference, the basic synthax goes like this:</p>
|
|
|
|
<pre><code class="language-javascript">// basic synthax for unitless properties
|
|
var myAttrTween = KUTE.to('selector', {attr: {attributeName: 75}});
|
|
|
|
// OR for attributes that are ALWAYS suffixed / have a measurement unit
|
|
var mySufAttrTween = KUTE.to('selector', {attr:{attributeName: '15%'}});
|
|
</code></pre>
|
|
|
|
<p>Currently the Attributes Plugin does not support color properties such as <code>fill</code> or <code>stroke</code> as well as properties with multiple values like <code>stroke-dasharray</code>, <code>viewBox</code> or <code>transform</code> for simplicity reasons. Still, you have access to just about any SVGElement/Element presentation attribute available.</p>
|
|
|
|
<h3>Unitless Properties</h3>
|
|
<p>In the first example, let's play with the attributes of a <code><circle></code> element: radius and center coordinates.</p>
|
|
<pre><code class="language-javascript">// 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}});
|
|
</code></pre>
|
|
<p>A quick demo with the above:<p>
|
|
<div class="featurettes">
|
|
<svg class="example-box-model example-box" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150">
|
|
<circle class="bg-orange" id="circle" cx="75" cy="75" r="40" />
|
|
</svg>
|
|
|
|
<div class="example-buttons">
|
|
<a id="circleBtn" class="btn btn-orange" href="javascript:void(0)">Start</a>
|
|
</div>
|
|
</div>
|
|
|
|
<h3>Suffixed Properties</h3>
|
|
<p>Similar to the example on gradients with <a href="svg.html">SVG Plugin</a>, we can also animate the gradient positions, but make sure to always include the <code>%</code> suffix:</p>
|
|
<pre><code class="language-javascript">// 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%'}});
|
|
</code></pre>
|
|
|
|
<div class="featurettes">
|
|
<svg class="example-box-model example-box" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 615 615">
|
|
<defs>
|
|
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" style="stop-color: #e91b1f; stop-opacity:1"></stop>
|
|
<stop offset="100%" style="stop-color: #2196F3; stop-opacity:1"></stop>
|
|
</linearGradient>
|
|
</defs>
|
|
<path fill="url(#gradient)" d="M38.01,5.653h526.531c17.905,0,32.422,14.516,32.422,32.422v526.531
|
|
c0,17.905-14.517,32.422-32.422,32.422H38.01c-17.906,0-32.422-14.517-32.422-32.422V38.075C5.588,20.169,20.104,5.653,38.01,5.653z"/>
|
|
</svg>
|
|
|
|
<div class="example-buttons">
|
|
<a id="gradBtn" class="btn btn-pink" href="javascript:void(0)">Start</a>
|
|
</div>
|
|
</div>
|
|
<p>This plugin is quite handy and a great addition to the <a href="svg.html">SVG Plugin</a>.</p>
|
|
</div>
|
|
|
|
<!-- FOOTER -->
|
|
<footer>
|
|
<div class="content-wrap">
|
|
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
|
|
<p>© 2007 - 2016 · <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
</div><!-- /.site-wrapper -->
|
|
|
|
|
|
|
|
<!-- JavaScript
|
|
================================================== -->
|
|
<!-- Placed at the end of the document so the pages load faster -->
|
|
|
|
<!-- highlighter -->
|
|
<script src="./assets/js/prism.js" type="text/javascript"></script>
|
|
|
|
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.5.0/kute.min.js"></script> KUTE CDN -->
|
|
<script src="./src/kute.js"></script> <!-- KUTE.js core -->
|
|
<script src="./src/kute-attr.js"></script> <!-- KUTE.js Attributes Plugin -->
|
|
<script src="./assets/js/scripts.js"></script> <!-- global scripts stuff -->
|
|
<script src="./assets/js/attr.js"></script> <!-- css plugin examples -->
|
|
</body>
|
|
</html> |