<img src="https://i.imgur.com/0R4B416.png" height="100">

<blockquote>
<p>Lightweight JavaScript (ES6) tweening library.</p>
</blockquote>
<p><a href="https://travis-ci.org/sasha240100/between.js"><img src="https://travis-ci.org/sasha240100/between.js.svg?branch=master" alt=""></a>
<a href="https://www.npmjs.com/package/between.js"><img src="https://img.shields.io/npm/v/between.js.svg" alt=""></a></p>
<p><a href="https://nodei.co/npm/between.js/"><img src="https://nodei.co/npm/between.js.png" alt="NPM"></a></p>
<p><strong>EXAMPLES</strong></p>
<ul>
<li><a href="http://between.js.org/">Examples collection</a></li>
</ul>
<p><strong>DOCUMENTATION</strong></p>
<ul>
<li><a href="#purpose">Purpose</a></li>
<li><a href="#install">Install</a><ul>
<li><a href="#with-npm">With npm</a></li>
<li><a href="#or-fetch-from-cdn">Or fetch from CDN</a></li>
</ul>
</li>
<li><a href="#basic-usage">Basic usage</a><ul>
<li><a href="#module">Module</a></li>
<li><a href="#or-in-html">Or in HTML:</a></li>
</ul>
</li>
<li><a href="#api">API</a></li>
<li><a href="#events">Events</a></li>
<li><a href="#different-values">Different values</a></li>
<li><a href="#looping">Looping</a></li>
<li><a href="#easing">Easing</a></li>
<li><a href="#color">Color</a></li>
<li><a href="#mixed-examples">Mixed examples</a></li>
</ul>
<h1 id="id-purpose">Purpose</h1>
<p>Make tweening usage convenient and powerful. There are certain things that we were following while developed this library, we wanted to make it:</p>
<ul>
<li><strong>Lightweight</strong> :snowflake: JS Tweening library.<blockquote>
<p>The library is only <code>8.3 Kb (3Kb gzip)</code></p>
</blockquote>
</li>
<li><strong>Performant</strong> :zap: JS Tweening library. <blockquote>
<p>It uses optimization patterns to speed up &amp; smooth animation.</p>
</blockquote>
</li>
<li><strong>Modern</strong> :gem: JS Tweening library<blockquote>
<p>The library is written in <code>ES6</code>, compiled to ES5 for global browsers support and provides <code>ES6 API</code>.</p>
</blockquote>
</li>
</ul>
<h1 id="id-install">Install</h1>
<h2 id="id-with-npm">With npm</h2>
<pre><code>$ npm install between.js
</code></pre>
<h2 id="id-or-fetch-from-cdn">Or fetch from CDN</h2>
<pre><code>&lt;script src=&quot;https://rawgit.com/sasha240100/between.js/master/build/between.js&quot;&gt;&lt;/script&gt;
</code></pre>
<h1 id="id-basic-usage">Basic usage</h1>
<h2 id="id-module">Module</h2>
<pre><code class="hljs language-javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">Between</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;between.js&#x27;</span>;

<span class="hljs-comment">// new Between(from, to).time(duration)</span>
<span class="hljs-keyword">new</span> <span class="hljs-title class_">Between</span>(<span class="hljs-number">1</span>, <span class="hljs-number">10</span>).<span class="hljs-title function_">time</span>(<span class="hljs-number">1000</span>)
  .<span class="hljs-title function_">on</span>(<span class="hljs-string">&#x27;update&#x27;</span>, <span class="hljs-function">(<span class="hljs-params">value</span>) =&gt;</span> { <span class="hljs-comment">// This callback is executed in every frame</span>
      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(value);
  });
</code></pre>
<h2 id="id-or-in-html">Or in HTML:</h2>
<pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./path/to/between.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript">
  <span class="hljs-keyword">new</span> <span class="hljs-title class_">Between</span>(<span class="hljs-number">1</span>, <span class="hljs-number">10</span>).<span class="hljs-title function_">time</span>(<span class="hljs-number">1000</span>)
    .<span class="hljs-title function_">on</span>(<span class="hljs-string">&#x27;update&#x27;</span>, <span class="hljs-function">(<span class="hljs-params">value</span>) =&gt;</span> {
        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(value);
    });
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</code></pre>
<h1 id="id-api">API</h1>
<pre><code class="hljs language-js"><span class="hljs-comment">// Constructor</span>
<span class="hljs-keyword">new</span> <span class="hljs-title class_">Between</span>(
 [<span class="hljs-title class_">Number</span>|<span class="hljs-title class_">Object</span>|<span class="hljs-title class_">Array</span>] <span class="hljs-keyword">from</span>, 
 [<span class="hljs-title class_">Number</span>|<span class="hljs-title class_">Object</span>|<span class="hljs-title class_">Array</span>] to
)

<span class="hljs-comment">// Methods</span>
  .<span class="hljs-title function_">time</span>([<span class="hljs-title class_">Number</span>] duration) <span class="hljs-comment">// Set duration</span>
  .<span class="hljs-title function_">loop</span>([<span class="hljs-title class_">String</span>] mode, [?<span class="hljs-title class_">Number</span>] repeatTimes) <span class="hljs-comment">// Set loop mode, if &quot;repeatTimes&quot; is falsy, treats as &quot;endless&quot;</span>
  .<span class="hljs-title function_">easing</span>([<span class="hljs-title class_">Function</span>] easing) <span class="hljs-comment">// Set easing function</span>
  .<span class="hljs-title function_">on</span>([<span class="hljs-title class_">String</span>] eventName, [<span class="hljs-title class_">Function</span>] callback) <span class="hljs-comment">// Add event listener</span>
  .<span class="hljs-title function_">pause</span>() <span class="hljs-comment">// Pauses</span>
  .<span class="hljs-title function_">play</span>() <span class="hljs-comment">// Resumes</span>

<span class="hljs-comment">// Getters</span>
  .<span class="hljs-property">isPaused</span> <span class="hljs-comment">// returns true if paused</span>
</code></pre>
<blockquote>
<p>There is no need to &quot;start&quot; the tween. It is executed immediately once it was created.</p>
</blockquote>
<h1 id="id-events">Events</h1>
<pre><code class="hljs language-javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">Between</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;between.js&#x27;</span>;

<span class="hljs-keyword">new</span> <span class="hljs-title class_">Between</span>(<span class="hljs-number">1</span>, <span class="hljs-number">10</span>).<span class="hljs-title function_">time</span>(<span class="hljs-number">1000</span>)
  .<span class="hljs-title function_">on</span>(<span class="hljs-string">&#x27;update&#x27;</span>, <span class="hljs-function">(<span class="hljs-params">value</span>) =&gt;</span> {
      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(value); 
  })
  .<span class="hljs-title function_">on</span>(<span class="hljs-string">&#x27;start&#x27;</span>, <span class="hljs-function">(<span class="hljs-params">value</span>) =&gt;</span> {
      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(value);
  })
  .<span class="hljs-title function_">on</span>(<span class="hljs-string">&#x27;pause&#x27;</span>, <span class="hljs-function">(<span class="hljs-params">value</span>) =&gt;</span> {
      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(value); 
  })
  .<span class="hljs-title function_">on</span>(<span class="hljs-string">&#x27;play&#x27;</span>, <span class="hljs-function">(<span class="hljs-params">value</span>) =&gt;</span> {
      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(value);
  })
  .<span class="hljs-title function_">on</span>(<span class="hljs-string">&#x27;complete&#x27;</span>, <span class="hljs-function">(<span class="hljs-params">value</span>) =&gt;</span> {
      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(value);
  });
</code></pre>
<h1 id="id-different-values">Different values</h1>
<ul>
<li>Numbers</li>
<li>Arrays</li>
<li>Objects</li>
</ul>
<p><strong>Numbers</strong></p>
<pre><code class="hljs language-javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">Between</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;between.js&#x27;</span>;

<span class="hljs-keyword">new</span> <span class="hljs-title class_">Between</span>(<span class="hljs-number">1</span>, <span class="hljs-number">10</span>).<span class="hljs-title function_">time</span>(<span class="hljs-number">1000</span>)
  .<span class="hljs-title function_">on</span>(<span class="hljs-string">&#x27;update&#x27;</span>, <span class="hljs-function">(<span class="hljs-params">value</span>) =&gt;</span> {
      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(value);
  });
</code></pre>
<p><a href="http://between.js.org/basic.html">Example</a></p>
<p><strong>Arrays</strong></p>
<pre><code class="hljs language-javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">Between</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;between.js&#x27;</span>;

<span class="hljs-keyword">new</span> <span class="hljs-title class_">Between</span>([<span class="hljs-number">1</span>, <span class="hljs-number">5</span>], [<span class="hljs-number">10</span>, <span class="hljs-number">10</span>]).<span class="hljs-title function_">time</span>(<span class="hljs-number">1000</span>)
  .<span class="hljs-title function_">on</span>(<span class="hljs-string">&#x27;update&#x27;</span>, <span class="hljs-function">(<span class="hljs-params">value</span>) =&gt;</span> {
      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(value);
   });
</code></pre>
<p><a href="http://between.js.org/arrays.html">Example</a></p>
<p><strong>Objects</strong></p>
<pre><code class="hljs language-javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">Between</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;between.js&#x27;</span>;

<span class="hljs-keyword">new</span> <span class="hljs-title class_">Between</span>({<span class="hljs-attr">x</span>: <span class="hljs-number">2</span>, <span class="hljs-attr">y</span>: <span class="hljs-number">3</span>, <span class="hljs-attr">z</span>: <span class="hljs-number">4</span>}, {<span class="hljs-attr">x</span>: <span class="hljs-number">4</span>, <span class="hljs-attr">y</span>: <span class="hljs-number">6</span>, <span class="hljs-attr">z</span>: <span class="hljs-number">10</span>}).<span class="hljs-title function_">time</span>(<span class="hljs-number">1000</span>)
  .<span class="hljs-title function_">on</span>(<span class="hljs-string">&#x27;update&#x27;</span>, <span class="hljs-function">(<span class="hljs-params">value</span>) =&gt;</span> {
      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(value);
  });
</code></pre>
<p><a href="http://between.js.org/objects.html">Example</a></p>
<h1 id="id-looping">Looping</h1>
<p>Repeat <code>N</code> times</p>
<pre><code class="hljs language-javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">Between</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;between.js&#x27;</span>;

<span class="hljs-keyword">new</span> <span class="hljs-title class_">Between</span>(<span class="hljs-number">1</span>, <span class="hljs-number">10</span>).<span class="hljs-title function_">time</span>(<span class="hljs-number">4000</span>)
  .<span class="hljs-title function_">loop</span>(<span class="hljs-string">&#x27;repeat&#x27;</span>, N)
  .<span class="hljs-title function_">on</span>(<span class="hljs-string">&#x27;update&#x27;</span>, <span class="hljs-function">(<span class="hljs-params">value, {times}</span>) =&gt;</span> {
      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(value);
      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(times);
  });
</code></pre>
<p><a href="http://between.js.org/loop-repeat.html">Example</a></p>
<p>Repeat endless</p>
<pre><code class="hljs language-javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">Between</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;between.js&#x27;</span>;

<span class="hljs-keyword">new</span> <span class="hljs-title class_">Between</span>(<span class="hljs-number">1</span>, <span class="hljs-number">10</span>).<span class="hljs-title function_">time</span>(<span class="hljs-number">4000</span>)
  .<span class="hljs-title function_">loop</span>(<span class="hljs-string">&#x27;repeat&#x27;</span>)
  .<span class="hljs-title function_">on</span>(<span class="hljs-string">&#x27;update&#x27;</span>, <span class="hljs-function">(<span class="hljs-params">value</span>) =&gt;</span> {
      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(value);
  });
</code></pre>
<p><a href="http://between.js.org/loop-repeat.html">Example</a></p>
<p>Bounce <code>N</code> times</p>
<pre><code class="hljs language-javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">Between</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;between.js&#x27;</span>;

<span class="hljs-keyword">new</span> <span class="hljs-title class_">Between</span>(<span class="hljs-number">1</span>, <span class="hljs-number">10</span>).<span class="hljs-title function_">time</span>(<span class="hljs-number">4000</span>)
  .<span class="hljs-title function_">loop</span>(<span class="hljs-string">&#x27;bounce&#x27;</span>, N)
  .<span class="hljs-title function_">on</span>(<span class="hljs-string">&#x27;update&#x27;</span>, <span class="hljs-function">(<span class="hljs-params">value, {times}</span>) =&gt;</span> {
      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(value);
      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(times);
  });
</code></pre>
<p><a href="http://between.js.org/loop-bounce.html">Example</a></p>
<h1 id="id-easing">Easing</h1>
<pre><code class="hljs language-javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">Between</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;between.js&#x27;</span>;
<span class="hljs-keyword">import</span> <span class="hljs-title class_">Easing</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;easing-functions&#x27;</span>;

<span class="hljs-comment">// choose easing mode frome easing-functions</span>

<span class="hljs-keyword">new</span> <span class="hljs-title class_">Between</span>(<span class="hljs-number">1</span>, <span class="hljs-number">10</span>).<span class="hljs-title function_">time</span>(<span class="hljs-number">4000</span>)
  .<span class="hljs-title function_">easing</span>(<span class="hljs-title class_">Between</span>.<span class="hljs-property">Easing</span>.<span class="hljs-property">Cubic</span>.<span class="hljs-property">InOut</span>)
  .<span class="hljs-title function_">on</span>(<span class="hljs-string">&#x27;update&#x27;</span>, <span class="hljs-function">(<span class="hljs-params">value</span>) =&gt;</span> {
      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(value);
  });
</code></pre>
<p><a href="http://between.js.org/easing.html">Example</a></p>
<img src=".gitbook/assets/screen-shot-2018-07-29-at-13.25.52.png" height="400">

<p><a href="https://www.npmjs.com/package/easing-functions">easing-functions npm</a> </p>
<h1 id="id-color">Color</h1>
<p>Color types:</p>
<ul>
<li>HEX</li>
<li>HSL</li>
<li>RGB</li>
<li>Words (red, yellow...)</li>
</ul>
<pre><code class="hljs language-javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">Between</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;between.js&#x27;</span>;
<span class="hljs-keyword">import</span> <span class="hljs-title class_">ColorPlugin</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;between.js/build/dom-color.between.js&#x27;</span>;

<span class="hljs-title class_">Between</span>.<span class="hljs-property">_plugins</span>.<span class="hljs-property">color</span> = <span class="hljs-title class_">ColorPlugin</span>;

<span class="hljs-keyword">new</span> <span class="hljs-title class_">Between</span>(<span class="hljs-string">&#x27;red&#x27;</span>, <span class="hljs-string">&#x27;rgb(255,40,30)&#x27;</span>).<span class="hljs-title function_">time</span>(<span class="hljs-number">4000</span>)
  .<span class="hljs-title function_">on</span>(<span class="hljs-string">&#x27;update&#x27;</span>, <span class="hljs-function">(<span class="hljs-params">value</span>) =&gt;</span> {
      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(value);
  });
</code></pre>
<p><a href="http://between.js.org/color-plugin.html">Example</a></p>
<p>Or in HTML:</p>
<pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./path/to/between.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./path/to/dom-color.between.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</code></pre>
<h1 id="id-mixed-examples">Mixed examples</h1>
<pre><code class="hljs language-javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">Between</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;between.js&#x27;</span>;
<span class="hljs-keyword">import</span> <span class="hljs-title class_">Easing</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;easing-functions&#x27;</span>;
<span class="hljs-keyword">import</span> <span class="hljs-title class_">ColorPlugin</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;between.js/build/dom-color.between.js&#x27;</span>;

<span class="hljs-title class_">Between</span>.<span class="hljs-property">_plugins</span>.<span class="hljs-property">color</span> = <span class="hljs-title class_">ColorPlugin</span>;

<span class="hljs-comment">// choose easing mode frome easing-functions</span>

<span class="hljs-keyword">new</span> <span class="hljs-title class_">Between</span>(<span class="hljs-string">&#x27;red&#x27;</span>, <span class="hljs-string">&#x27;rgb(255,40,30)&#x27;</span>).<span class="hljs-title function_">time</span>(<span class="hljs-number">4000</span>)
  .<span class="hljs-title function_">loop</span>(<span class="hljs-string">&#x27;repeat&#x27;</span>, <span class="hljs-number">3</span>)
  .<span class="hljs-title function_">easing</span>(<span class="hljs-title class_">Between</span>.<span class="hljs-property">Easing</span>.<span class="hljs-property">Linear</span>)
  .<span class="hljs-title function_">on</span>(<span class="hljs-string">&#x27;update&#x27;</span>, <span class="hljs-function">(<span class="hljs-params">value</span>) =&gt;</span> {
      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(value);
  });
</code></pre>
<pre><code class="hljs language-javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">Between</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;between.js&#x27;</span>;
<span class="hljs-keyword">import</span> <span class="hljs-title class_">Easing</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;easing-functions&#x27;</span>;

<span class="hljs-comment">// choose easing mode frome easing-functions</span>

<span class="hljs-keyword">new</span> <span class="hljs-title class_">Between</span>(<span class="hljs-number">1</span>, <span class="hljs-number">10</span>).<span class="hljs-title function_">time</span>(<span class="hljs-number">4000</span>)
  .<span class="hljs-title function_">loop</span>(<span class="hljs-string">&#x27;bounce&#x27;</span>, <span class="hljs-number">3</span>)
  .<span class="hljs-title function_">easing</span>(<span class="hljs-title class_">Between</span>.<span class="hljs-property">Easing</span>.<span class="hljs-property">Cubic</span>.<span class="hljs-property">InOut</span>)
  .<span class="hljs-title function_">on</span>(<span class="hljs-string">&#x27;update&#x27;</span>, <span class="hljs-function">(<span class="hljs-params">value</span>) =&gt;</span> {
      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(value);
  });
</code></pre>
<pre><code class="hljs language-javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">Between</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;between.js&#x27;</span>;
<span class="hljs-keyword">import</span> <span class="hljs-title class_">Easing</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;easing-functions&#x27;</span>;

<span class="hljs-comment">// choose easing mode frome easing-functions</span>

<span class="hljs-keyword">new</span> <span class="hljs-title class_">Between</span>(<span class="hljs-number">1</span>, <span class="hljs-number">10</span>).<span class="hljs-title function_">time</span>(<span class="hljs-number">4000</span>)
  .<span class="hljs-title function_">loop</span>(<span class="hljs-string">&#x27;repeat&#x27;</span>, <span class="hljs-number">4</span>)
  .<span class="hljs-title function_">easing</span>(<span class="hljs-title class_">Between</span>.<span class="hljs-property">Easing</span>.<span class="hljs-property">Elastic</span>.<span class="hljs-property">In</span>)
  .<span class="hljs-title function_">on</span>(<span class="hljs-string">&#x27;update&#x27;</span>, <span class="hljs-function">(<span class="hljs-params">value</span>) =&gt;</span> {
      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(value);
  })
  .<span class="hljs-title function_">on</span>(<span class="hljs-string">&#x27;complete&#x27;</span>, <span class="hljs-function">(<span class="hljs-params">value</span>) =&gt;</span> {
      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(value);
  });
</code></pre>