docs/index.html
<!doctype html>
<html class="default no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>@solaldr/animate</title>
<meta name="description" content="Documentation for @solaldr/animate">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="assets/css/main.css">
<script async src="assets/js/search.js" id="search-script"></script>
</head>
<body>
<header>
<div class="tsd-page-toolbar">
<div class="container">
<div class="table-wrap">
<div class="table-cell" id="tsd-search" data-index="assets/js/search.json" data-base=".">
<div class="field">
<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
<input id="tsd-search-field" type="text" />
</div>
<ul class="results">
<li class="state loading">Preparing search index...</li>
<li class="state failure">The search index is not available</li>
</ul>
<a href="index.html" class="title">@solaldr/animate</a>
</div>
<div class="table-cell" id="tsd-widgets">
<div id="tsd-filter">
<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
<div class="tsd-filter-group">
<div class="tsd-select" id="tsd-filter-visibility">
<span class="tsd-select-label">All</span>
<ul class="tsd-select-list">
<li data-value="public">Public</li>
<li data-value="protected">Public/Protected</li>
<li data-value="private" class="selected">All</li>
</ul>
</div>
<input type="checkbox" id="tsd-filter-inherited" checked />
<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
</div>
</div>
<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
</div>
</div>
</div>
</div>
<div class="tsd-page-title">
<div class="container">
<h1>@solaldr/animate</h1>
</div>
</div>
</header>
<div class="container container-main">
<div class="row">
<div class="col-8 col-content">
<div class="tsd-panel tsd-typography">
<a href="#animate" id="animate" style="color: inherit; text-decoration: none;">
<h1>animate</h1>
</a>
<p><a href="https://codeclimate.com/github/SolalDR/animate/maintainability"><img src="https://api.codeclimate.com/v1/badges/af311063cdf1cb9552c3/maintainability" alt="Maintainability"></a>
<img src="https://img.shields.io/bundlephobia/min/@solaldr/animate" alt="npm bundle size (scoped)">
<img src="https://img.shields.io/bundlephobia/minzip/@solaldr/animate" alt="npm bundle size (scoped)"></p>
<p>A lighter library for animation.
No DOM abstraction, just animate your values with a cool easing.
Agnostic, works fine on node server or web-workers.</p>
<p><a href="https://solaldr.github.io/animate/index.html">Documentation</a> — <a href="https://github.com/SolalDR/animate">Source</a></p>
<a href="#getting-started" id="getting-started" style="color: inherit; text-decoration: none;">
<h2>Getting started</h2>
</a>
<p>Clone this repository and install its dependencies:</p>
<p>With npm:</p>
<pre><code><span style="color: #001080">npm</span><span style="color: #000000"> </span><span style="color: #001080">install</span><span style="color: #000000"> @</span><span style="color: #001080">solaldr</span><span style="color: #000000">/</span><span style="color: #001080">animate</span>
</code></pre>
<p>With yarn:</p>
<pre><code><span style="color: #001080">yarn</span><span style="color: #000000"> </span><span style="color: #001080">add</span><span style="color: #000000"> @</span><span style="color: #001080">solaldr</span><span style="color: #000000">/</span><span style="color: #001080">animate</span>
</code></pre>
<a href="#how-to-use" id="how-to-use" style="color: inherit; text-decoration: none;">
<h2>How to use</h2>
</a>
<pre><code class="language-javascript"><span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #001080">animate</span><span style="color: #000000"> </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">"@solaldr/animate"</span><span style="color: #000000">;</span>
<span style="color: #008000">// Start the main timeline </span>
<span style="color: #001080">animate</span><span style="color: #000000">.</span><span style="color: #795E26">start</span><span style="color: #000000">();</span>
<span style="color: #001080">animate</span><span style="color: #000000">.</span><span style="color: #795E26">add</span><span style="color: #000000">({</span>
<span style="color: #000000"> </span><span style="color: #001080">from:</span><span style="color: #000000"> </span><span style="color: #098658">0</span><span style="color: #000000">,</span>
<span style="color: #000000"> </span><span style="color: #001080">to:</span><span style="color: #000000"> </span><span style="color: #098658">1000</span><span style="color: #000000">,</span>
<span style="color: #000000"> </span><span style="color: #001080">duration:</span><span style="color: #000000"> </span><span style="color: #098658">5000</span><span style="color: #000000">, </span><span style="color: #008000">// default 1000 (ms)</span>
<span style="color: #000000"> </span><span style="color: #001080">timingFunction:</span><span style="color: #000000"> </span><span style="color: #A31515">"easeInOutQuad"</span><span style="color: #000000">, </span><span style="color: #008000">// default "linear"</span>
<span style="color: #000000">})</span>
<span style="color: #000000">.</span><span style="color: #795E26">on</span><span style="color: #000000">(</span><span style="color: #A31515">'progress'</span><span style="color: #000000">, ({ </span><span style="color: #001080">value</span><span style="color: #000000">, </span><span style="color: #001080">advancement</span><span style="color: #000000"> }) </span><span style="color: #0000FF">=></span><span style="color: #000000"> {</span>
<span style="color: #000000"> </span><span style="color: #008000">// Easing value between 0 and 1000</span>
<span style="color: #000000"> </span><span style="color: #001080">console</span><span style="color: #000000">.</span><span style="color: #795E26">log</span><span style="color: #000000">(</span><span style="color: #001080">value</span><span style="color: #000000">); </span>
<span style="color: #000000"> </span><span style="color: #008000">// Easing value between 0 and 1</span>
<span style="color: #000000"> </span><span style="color: #001080">console</span><span style="color: #000000">.</span><span style="color: #795E26">log</span><span style="color: #000000">(</span><span style="color: #001080">advancement</span><span style="color: #000000">); </span>
<span style="color: #000000">})</span>
<span style="color: #000000">.</span><span style="color: #795E26">on</span><span style="color: #000000">(</span><span style="color: #A31515">'end'</span><span style="color: #000000">, () </span><span style="color: #0000FF">=></span><span style="color: #000000"> {</span>
<span style="color: #000000"> </span><span style="color: #008000">// Triggered at the end of the anim</span>
<span style="color: #000000">})</span>
</code></pre>
<a href="#object-syntax" id="object-syntax" style="color: inherit; text-decoration: none;">
<h3>Object syntax</h3>
</a>
<pre><code class="language-javascript"><span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #001080">animate</span><span style="color: #000000">, {</span><span style="color: #001080">Animation</span><span style="color: #000000">} </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">"@solaldr/animate"</span><span style="color: #000000">;</span>
<span style="color: #001080">animate</span><span style="color: #000000">.</span><span style="color: #795E26">start</span><span style="color: #000000">();</span>
<span style="color: #001080">animate</span><span style="color: #000000">.</span><span style="color: #795E26">add</span><span style="color: #000000">(</span><span style="color: #0000FF">new</span><span style="color: #000000"> </span><span style="color: #795E26">Animation</span><span style="color: #000000">({</span>
<span style="color: #000000"> ... </span><span style="color: #001080">options</span><span style="color: #000000"> </span><span style="color: #001080">here</span>
<span style="color: #000000">}))</span>
</code></pre>
<a href="#easings" id="easings" style="color: inherit; text-decoration: none;">
<h3>Easings</h3>
</a>
<p>You may want to use different Easing method inside the same animation</p>
<pre><code class="language-javascript"><span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #001080">animate</span><span style="color: #000000">, { </span><span style="color: #001080">Easing</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">"@solaldr/animate"</span><span style="color: #000000">;</span>
<span style="color: #001080">animate</span><span style="color: #000000">.</span><span style="color: #795E26">start</span><span style="color: #000000">();</span>
<span style="color: #008000">// Default 1000ms interpolate from 0 to 1</span>
<span style="color: #001080">animate</span><span style="color: #000000">.</span><span style="color: #795E26">add</span><span style="color: #000000">().</span><span style="color: #795E26">on</span><span style="color: #000000">(</span><span style="color: #A31515">'progress'</span><span style="color: #000000">, ({ </span><span style="color: #001080">advancement</span><span style="color: #000000"> }) </span><span style="color: #0000FF">=></span><span style="color: #000000"> {</span>
<span style="color: #000000"> </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">myEasingValue</span><span style="color: #000000"> = </span><span style="color: #001080">Easing</span><span style="color: #000000">.</span><span style="color: #795E26">easeInQuad</span><span style="color: #000000">(</span><span style="color: #001080">advancement</span><span style="color: #000000">);</span>
<span style="color: #000000">});</span>
</code></pre>
<p>Use bezier functions</p>
<pre><code class="language-javascript"><span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #001080">animate</span><span style="color: #000000">, { </span><span style="color: #001080">Easing</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">"@solaldr/animate"</span><span style="color: #000000">;</span>
<span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">Bezier</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">"@solaldr/esm/Bezier.js"</span>
<span style="color: #001080">animate</span><span style="color: #000000">.</span><span style="color: #795E26">start</span><span style="color: #000000">();</span>
<span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">timingFunction</span><span style="color: #000000"> = </span><span style="color: #795E26">Bezier</span><span style="color: #000000">(</span><span style="color: #098658">0.25</span><span style="color: #000000">, </span><span style="color: #098658">0.1</span><span style="color: #000000">, </span><span style="color: #098658">0.28</span><span style="color: #000000">, </span><span style="color: #098658">0.51</span><span style="color: #000000">)</span>
<span style="color: #001080">animate</span><span style="color: #000000">.</span><span style="color: #795E26">add</span><span style="color: #000000">({</span>
<span style="color: #000000"> </span><span style="color: #001080">timingFunction</span>
<span style="color: #000000">});</span>
</code></pre>
<a href="#advanced-use" id="advanced-use" style="color: inherit; text-decoration: none;">
<h3>Advanced use</h3>
</a>
<p><code>and()</code> method allow you to run multiple animation at the same time</p>
<pre><code class="language-javascript"><span style="color: #001080">animate</span>
<span style="color: #000000">.</span><span style="color: #795E26">add</span><span style="color: #000000">({ </span><span style="color: #001080">from:</span><span style="color: #000000"> </span><span style="color: #098658">0</span><span style="color: #000000">, </span><span style="color: #001080">to:</span><span style="color: #000000"> </span><span style="color: #098658">100</span><span style="color: #000000"> }).</span><span style="color: #795E26">on</span><span style="color: #000000">(</span><span style="color: #A31515">'progress'</span><span style="color: #000000">, </span><span style="color: #001080">someProgressCB</span><span style="color: #000000">))</span>
<span style="color: #000000">.</span><span style="color: #795E26">and</span><span style="color: #000000">({ </span><span style="color: #001080">from:</span><span style="color: #000000"> </span><span style="color: #098658">100</span><span style="color: #000000">, </span><span style="color: #001080">to:</span><span style="color: #000000"> </span><span style="color: #098658">0</span><span style="color: #000000">}).</span><span style="color: #795E26">on</span><span style="color: #000000">(</span><span style="color: #A31515">'progress'</span><span style="color: #000000">, </span><span style="color: #001080">reverseProgressCB</span><span style="color: #000000">)</span>
</code></pre>
<p><code>then()</code> method allow you to run chain animation</p>
<pre><code class="language-javascript"><span style="color: #001080">animate</span>
<span style="color: #000000">.</span><span style="color: #795E26">add</span><span style="color: #000000">({ </span><span style="color: #001080">from:</span><span style="color: #000000"> </span><span style="color: #098658">0</span><span style="color: #000000">, </span><span style="color: #001080">to:</span><span style="color: #000000"> </span><span style="color: #098658">100</span><span style="color: #000000"> }).</span><span style="color: #795E26">on</span><span style="color: #000000">(</span><span style="color: #A31515">'progress'</span><span style="color: #000000">, </span><span style="color: #001080">someProgressCB</span><span style="color: #000000">))</span>
<span style="color: #000000">.</span><span style="color: #795E26">then</span><span style="color: #000000">({ </span><span style="color: #001080">from:</span><span style="color: #000000"> </span><span style="color: #098658">100</span><span style="color: #000000">, </span><span style="color: #001080">to:</span><span style="color: #000000"> </span><span style="color: #098658">0</span><span style="color: #000000">}).</span><span style="color: #795E26">on</span><span style="color: #000000">(</span><span style="color: #A31515">'progress'</span><span style="color: #000000">, </span><span style="color: #001080">reverseProgressCB</span><span style="color: #000000">)</span>
</code></pre>
<p><code>promise()</code> Use promise</p>
<pre><code class="language-javascript"><span style="color: #0000FF">async</span><span style="color: #000000"> </span><span style="color: #0000FF">function</span><span style="color: #000000">() {</span>
<span style="color: #000000"> </span><span style="color: #AF00DB">await</span><span style="color: #000000"> </span><span style="color: #001080">animate</span><span style="color: #000000">.</span><span style="color: #795E26">add</span><span style="color: #000000">({ </span><span style="color: #001080">from:</span><span style="color: #000000"> </span><span style="color: #098658">0</span><span style="color: #000000">, </span><span style="color: #001080">to:</span><span style="color: #000000"> </span><span style="color: #098658">100</span><span style="color: #000000"> })</span>
<span style="color: #000000"> .</span><span style="color: #795E26">on</span><span style="color: #000000">(</span><span style="color: #A31515">'progress'</span><span style="color: #000000">, </span><span style="color: #001080">someProgressCB</span><span style="color: #000000">))</span>
<span style="color: #000000"> .</span><span style="color: #795E26">promise</span><span style="color: #000000">()</span>
<span style="color: #000000"> </span>
<span style="color: #000000"> </span><span style="color: #795E26">alert</span><span style="color: #000000">(</span><span style="color: #A31515">"Run after this animation"</span><span style="color: #000000">)</span>
<span style="color: #000000">} </span>
</code></pre>
<a href="#custom-timeline" id="custom-timeline" style="color: inherit; text-decoration: none;">
<h3>Custom timeline</h3>
</a>
<pre><code class="language-javascript"><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">Timeline</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">"@solaldr/animate"</span><span style="color: #000000">;</span>
<span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">timeline</span><span style="color: #000000"> = </span><span style="color: #0000FF">new</span><span style="color: #000000"> </span><span style="color: #795E26">Timeline</span><span style="color: #000000">();</span>
<span style="color: #001080">timeline</span><span style="color: #000000">.</span><span style="color: #795E26">start</span><span style="color: #000000">();</span>
<span style="color: #001080">timeline</span><span style="color: #000000">.</span><span style="color: #795E26">add</span><span style="color: #000000">({ ... });</span>
</code></pre>
<a href="#size-comparison" id="size-comparison" style="color: inherit; text-decoration: none;">
<h3>Size comparison</h3>
</a>
<table>
<thead>
<tr>
<th>Package</th>
<th>Version</th>
<th>Minified</th>
<th>Minified + GZIP</th>
</tr>
</thead>
<tbody><tr>
<td>@solaldr/animate</td>
<td>0.4.0</td>
<td>4.8 kB</td>
<td>1.5 kB</td>
</tr>
<tr>
<td>animejs</td>
<td>3.2.1</td>
<td>17.4 kB</td>
<td>6.9 kB</td>
</tr>
<tr>
<td>gsap</td>
<td>3.8.0</td>
<td>60.4 kB</td>
<td>23.5 kB</td>
</tr>
</tbody></table>
<a href="#license" id="license" style="color: inherit; text-decoration: none;">
<h2>License</h2>
</a>
<p><a href="LICENSE">MIT</a>.</p>
</div>
</div>
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
<nav class="tsd-navigation primary">
<ul>
<li class=" ">
<a href="modules.html">Exports</a>
</li>
</ul>
</nav>
<nav class="tsd-navigation secondary menu-sticky">
<ul class="before-current">
<li class=" tsd-kind-class">
<a href="classes/animation.html" class="tsd-kind-icon">Animation</a>
</li>
<li class=" tsd-kind-class">
<a href="classes/timeline.html" class="tsd-kind-icon">Timeline</a>
</li>
<li class=" tsd-kind-property">
<a href="modules.html#default" class="tsd-kind-icon">default</a>
</li>
<li class=" tsd-kind-variable">
<a href="modules.html#easing" class="tsd-kind-icon">Easing</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<footer class="with-border-bottom">
<div class="container">
<h2>Legend</h2>
<div class="tsd-legend-group">
<ul class="tsd-legend">
<li class="tsd-kind-constructor tsd-parent-kind-class"><span class="tsd-kind-icon">Constructor</span></li>
<li class="tsd-kind-property tsd-parent-kind-class"><span class="tsd-kind-icon">Property</span></li>
<li class="tsd-kind-method tsd-parent-kind-class"><span class="tsd-kind-icon">Method</span></li>
</ul>
</div>
</div>
</footer>
<div class="container tsd-generator">
<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
</div>
<div class="overlay"></div>
<script src="assets/js/main.js"></script>
</body>
</html>