Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/okikio/postcss-spring-easing. PostCSS plugin to add that bounce and boogie that only springs can bring
easings linear postcss postcss-plugin spring spring-easing
Something went wrong. Try again.
107 kB · 481 lines
HTML
at commit 23712df9
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481<!doctype html><html class="default" lang="en"><head><meta charset="utf-8"><link rel="preconnect" href="https://fonts.googleapis.com/"><link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin=""><link href="https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;700&display=swap" rel="stylesheet"><meta name="keyword" content="spring easing, spring animation, custom easing, framework agnostic, gsap, animejs"><meta name="color-scheme" content="dark light"><link rel="shortcut icon" href="/media/favicon.ico"><link rel="icon" type="image/svg+xml" href="/media/assets/favicon.svg"><meta name="web-author" content="Okiki Ojo"><meta name="robots" content="index, follow"><meta name="twitter:url" content="https://spring-easing.okikio.dev/"><meta name="twitter:site" content="@okikio_dev"><meta name="twitter:creator" content="@okikio_dev"><link href="https://twitter.com/okikio_dev" rel="me"><link rel="webmention" href="https://webmention.io/spring-easing.okikio.dev/webmention"><link rel="pingback" href="https://webmention.io/spring-easing.okikio.dev/xmlrpc"><link rel="pingback" href="https://webmention.io/webmention?forward=https://spring-easing.okikio.dev/endpoint"><script async defer type="module" data-host-url="https://bundlejs.com" data-domains="spring-easing.okikio.dev,okikio.dev" data-website-id="4921ec19-210c-45b0-b5b8-cb9aaae292e9" src="/media/measure.js"></script><meta http-equiv="x-ua-compatible" content="IE=edge"><title>spring-easing - v2.3.0</title><meta name="description" content="Documentation for spring-easing"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="assets/style.css"><link rel="stylesheet" href="assets/highlight.css"><link rel="stylesheet" href="assets/custom.css"><script defer src="assets/main.js"></script><script async src="assets/search.js" id="tsd-search-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os"</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base="."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z" fill="var(--color-text)"></path></svg></label><input type="text" id="tsd-search-field" aria-label="Search"></div><div class="field"><div id="tsd-toolbar-links"></div></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">spring-easing - v2.3.0</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><h2 id="spring-easing---v230">spring-easing - v2.3.0</h2></div><div class="tsd-panel tsd-typography"><a id="md:spring-easing" class="tsd-anchor"></a><h1 id="spring-easing"><a href="#md:spring-easing">spring-easing</a></h1><p><a href="https://bundlejs.com/?q=spring-easing&bundle" title="Check the total bundle size of spring-easing with whichever animation library you choose." target="_blank" rel="noopener"><img src="https://bundlejs.com/badge-light.svg" alt="Open Bundle"><span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a></p><!--  -->
<p><a href="https://www.npmjs.com/package/spring-easing" target="_blank" rel="noopener">NPM<span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a> <span style="padding-inline: 1rem">|</span> <a href="https://github.com/okikio/spring-easing#readme" target="_blank" rel="noopener">GitHub<span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a> <span style="padding-inline: 1rem">|</span> <a href="https://spring-easing.okikio.dev/" target="_blank" rel="noopener">Docs<span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a> <span style="padding-inline: 1rem">|</span> <a href="https://github.com/okikio/spring-easing/tree/main/LICENSE" target="_blank" rel="noopener">Licence<span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a></p><p>Quick and easy spring animations. Works with other animation libraries (<a href="https://greensock.com/" target="_blank" rel="noopener">gsap<span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a>, <a href="https://animejs.com/" target="_blank" rel="noopener">animejs<span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a>, <a href="http://npmjs.com/@okikio/animate" target="_blank" rel="noopener">@okikio/animate<span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a>, <a href="https://motion.dev/" target="_blank" rel="noopener">motion one<span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a>, <a href="/animation/">framer motion</a>, etc...) or the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API" target="_blank" rel="noopener">Web Animation API (WAAPI)<span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a>, you can learn more in the <a href="#use-with-animation-libraries">Usage</a> section.</p><p><code>spring-easing</code> works by generating arrays of <code>frame</code>'s which when placed in linear order creates a smooth spring like animation.</p><blockquote><p>A <code>frame</code> represent a single frame of an animation</p></blockquote><blockquote><p><em><strong>Note</strong>: the <code>spring-easing</code> package also supports 4 extra variants of <a href="https://spring-easing.okikio.dev/modules.html#SpringFrame" target="_blank" rel="noopener"><code>spring</code><span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a>, namely <a href="https://spring-easing.okikio.dev/modules.html#SpringInFrame" target="_blank" rel="noopener"><code>spring-in</code><span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a>, <a href="https://spring-easing.okikio.dev/modules.html#SpringOutFrame" target="_blank" rel="noopener"><code>spring-out</code><span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a>, <a href="https://spring-easing.okikio.dev/modules.html#SpringOutInFrame" target="_blank" rel="noopener"><code>spring-out-in</code><span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a>, and <a href="https://spring-easing.okikio.dev/modules.html#SpringInOutFrame" target="_blank" rel="noopener"><code>spring-in-out</code><span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a>, you can use these easing to create some really unique spring like animations.</em></p></blockquote><!-- > You can also read the [blog post](https://blog.okikio.dev/spring-easing), created for it's launch. -->
<p>You can create animation's like this with <code>spring-easing</code>,</p><p><img src="media/assets/spring-easing-demo-video.gif" width="1920" loading="lazy" alt="A demo of the various spring-easings available" align="center" style="border-radius: 1rem; aspect-ratio: auto 1920 / 899;"></p><!-- https://github.com/okikio/spring-easing/assets/17222836/3813945f-b301-4399-8383-bbab227c3f68
<video controls autoplay align="center" style="border-radius: 1rem; aspect-ratio: auto 1920 / 899;"> <source src="media/assets/spring-easing-demo-video.mp4" type="video/mp4"></video> -->
<blockquote><p><em>Check out the spring easing variants on <a href="https://codepen.io/okikio/pen/MWEMEgJ" target="_blank" rel="noopener">Codepen<span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a>.</em></p></blockquote><blockquote><p><em><strong>Attention</strong>: This entire library is a lightweight version of the <a href="https://native.okikio.dev/animate/api/custom-easing/" target="_blank" rel="noopener"><code>CustomEasing</code><span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a> implemented in <a href="https://native.okikio.dev/animate" target="_blank" rel="noopener"><code>@okikio/animate</code><span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a>, which supports only string and number interpolation. If you'd like the complete <code>CustomEasing</code> with color interpolation, complex value interpolation, and more, go through the source code as a <a href="https://gist.github.com/okikio/bed53ed621cb7f60e9a8b1ef92897471#file-custom-easing-ts" target="_blank" rel="noopener">Github Gist<span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a>, which is licensed under the MIT license.</em></p></blockquote><a id="md:installation" class="tsd-anchor"></a><h2 id="installation"><a href="#md:installation">Installation</a></h2><a id="md:node" class="tsd-anchor"></a><h3 id="node"><a href="#md:node">Node</a></h3><pre><code class="language-bash"><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-2">install</span><span class="hl-1"> </span><span class="hl-2">spring-easing</span></code><button>Copy</button></pre><details> <summary>Others</summary>
<pre><code class="language-bash"><span class="hl-0">yarn</span><span class="hl-1"> </span><span class="hl-2">add</span><span class="hl-1"> </span><span class="hl-2">spring-easing</span></code><button>Copy</button></pre><p>or</p><pre><code class="language-bash"><span class="hl-0">pnpm</span><span class="hl-1"> </span><span class="hl-2">install</span><span class="hl-1"> </span><span class="hl-2">spring-easing</span></code><button>Copy</button></pre></details>
<a id="md:deno" class="tsd-anchor"></a><h3 id="deno"><a href="#md:deno">Deno</a></h3><pre><code class="language-ts"><span class="hl-3">import</span><span class="hl-1"> { SpringEasing } </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-2">"https://deno.land/x/spring_easing/mod.ts"</span><span class="hl-1">;</span></code><button>Copy</button></pre><a id="md:usage" class="tsd-anchor"></a><h2 id="usage"><a href="#md:usage">Usage</a></h2><pre><code class="language-ts"><span class="hl-3">import</span><span class="hl-1"> { SpringEasing } </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-2">"spring-easing"</span><span class="hl-1">;</span><br><span class="hl-4">// or</span><br><span class="hl-3">import</span><span class="hl-1"> SpringEasing </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-2">"spring-easing"</span><span class="hl-1">;</span></code><button>Copy</button></pre><p>You can also use it directly through a script tag:</p><pre><code class="language-html"><span class="hl-1"><</span><span class="hl-5">script</span><span class="hl-1"> </span><span class="hl-0">src</span><span class="hl-1">=</span><span class="hl-2">"https://unpkg.com/spring-easing"</span><span class="hl-1"> </span><span class="hl-0">type</span><span class="hl-1">=</span><span class="hl-2">"module"</span><span class="hl-1">></</span><span class="hl-5">script</span><span class="hl-1">></span><br><span class="hl-1"><</span><span class="hl-5">script</span><span class="hl-1"> </span><span class="hl-0">type</span><span class="hl-1">=</span><span class="hl-2">"module"</span><span class="hl-1">></span><br><span class="hl-1"> </span><span class="hl-4">// You can then use it like this</span><br><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> { </span><span class="hl-6">SpringEasing</span><span class="hl-1"> } </span><span class="hl-3">=</span><span class="hl-1"> window.SpringEasing;</span><br><span class="hl-1"></</span><span class="hl-5">script</span><span class="hl-1">></span></code><button>Copy</button></pre><p>You can also use it via a CDN, e.g.</p><pre><code class="language-ts"><span class="hl-3">import</span><span class="hl-1"> { SpringEasing } </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-2">"https://esm.run/spring-easing"</span><span class="hl-1">;</span><br><span class="hl-4">// or</span><br><span class="hl-3">import</span><span class="hl-1"> { SpringEasing } </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-2">"https://esm.sh/spring-easing"</span><span class="hl-1">;</span><br><span class="hl-4">// or</span><br><span class="hl-3">import</span><span class="hl-1"> { SpringEasing } </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-2">"https://unpkg.com/spring-easing"</span><span class="hl-1">;</span><br><span class="hl-4">// or</span><br><span class="hl-3">import</span><span class="hl-1"> { SpringEasing } </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-2">"https://cdn.skypack.dev/spring-easing"</span><span class="hl-1">;</span><br><span class="hl-4">// or</span><br><span class="hl-3">import</span><span class="hl-1"> { SpringEasing } </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-2">"https://deno.bundlejs.com/file?q=spring-easing"</span><span class="hl-1">;</span><br><span class="hl-4">// or any number of other CDN's</span></code><button>Copy</button></pre><a id="md:use-with-animation-libraries" class="tsd-anchor"></a><h3 id="use-with-animation-libraries"><a href="#md:use-with-animation-libraries">Use with Animation Libraries</a></h3><blockquote><p><em><strong>Note:</strong> I cannot guarantee that every animation library works with <code>spring-easing</code>, for example, if an animation library doesn't support array values as keyframes, it won't work well with <code>spring-easing</code>.</em></p></blockquote><p>The libraries that have been tested are:</p><table><thead><tr><th>Animation Library</th><th>Support</th><th>Demo</th></tr></thead><tbody><tr><td><a href="https://greensock.com/" target="_blank" rel="noopener">GSAP<span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a></td><td>✅ Yes - <a href="/v3/GSAP/UtilityMethods/wrap()">Wrap Method</a></td><td><a href="https://codepen.io/okikio/pen/MWEMEgJ" target="_blank" rel="noopener">Codepen<span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a></td></tr><tr><td><a href="https://animejs.com/" target="_blank" rel="noopener">animejs<span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a></td><td>✅ Yes - <a href="https://animejs.com/documentation/#animationKeyframes" target="_blank" rel="noopener">Array Keyframes<span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a></td><td><a href="https://codepen.io/okikio/pen/MWEMEgJ" target="_blank" rel="noopener">Codepen<span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a></td></tr><tr><td><a href="https://www.framer.com/motion/" target="_blank" rel="noopener">Framer Motion<span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a></td><td>✅ Yes - <a href="/animation/">Array Keyframes</a></td><td><a href="https://codepen.io/okikio/pen/MWEMEgJ" target="_blank" rel="noopener">Codepen<span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a></td></tr><tr><td><a href="https://motion.dev/" target="_blank" rel="noopener">Motion One<span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a></td><td>✅ Yes - <a href="https://motion.dev/dom/animate#keyframes" target="_blank" rel="noopener">Array Keyframes<span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a></td><td><a href="https://codepen.io/okikio/pen/MWEMEgJ" target="_blank" rel="noopener">Codepen<span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a></td></tr><tr><td><a href="https://okikio.github.io/native/packages/animate" target="_blank" rel="noopener">@okikio/animate<span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a></td><td>✅ Yes - <a href="https://okikio.github.io/native/packages/animate/#animations" target="_blank" rel="noopener">Array Keyframes<span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a></td><td><a href="https://codepen.io/okikio/pen/MWEMEgJ" target="_blank" rel="noopener">Codepen<span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a></td></tr><tr><td><a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API" target="_blank" rel="noopener">Web Animation API (WAAPI)<span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a></td><td>✅ Yes - <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats#:~:text=An-,object,-containing%20key%2Dvalue" target="_blank" rel="noopener">Array Keyframes<span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a></td><td><a href="https://codepen.io/okikio/pen/MWEMEgJ" target="_blank" rel="noopener">Codepen<span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a></td></tr></tbody></table><p>e.g.</p><pre><code class="language-ts"><span class="hl-3">import</span><span class="hl-1"> anime </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-2">"animejs"</span><span class="hl-1">;</span><br><span class="hl-3">import</span><span class="hl-1"> { SpringEasing, SpringOutFrame } </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-2">"spring-easing"</span><span class="hl-1">;</span><br><br><span class="hl-4">// Note: this is the return value of `SpringEasing` and `GenerateSpringFrames`</span><br><span class="hl-3">let</span><span class="hl-1"> [translateX, duration] </span><span class="hl-3">=</span><span class="hl-1"> </span><span class="hl-0">SpringEasing</span><span class="hl-1">([</span><span class="hl-6">0</span><span class="hl-1">, </span><span class="hl-6">250</span><span class="hl-1">], {</span><br><span class="hl-1"> easing: </span><span class="hl-2">"spring-out-in(1, 100, 10, 0)"</span><span class="hl-1">,</span><br><span class="hl-1"> </span><span class="hl-4">// You can change the size of Array for the SpringEasing function to generate</span><br><span class="hl-1"> numPoints: </span><span class="hl-6">200</span><span class="hl-1">,</span><br><span class="hl-1"> </span><span class="hl-4">// The number of decimal places to round, final values in the generated Array</span><br><span class="hl-1"> </span><span class="hl-4">// This option doesn't exist on `GenerateSpringFrames`</span><br><span class="hl-1"> decimal: </span><span class="hl-6">5</span><span class="hl-1">,</span><br><span class="hl-1">});</span><br><br><span class="hl-0">anime</span><span class="hl-1">({</span><br><span class="hl-1"> targets: </span><span class="hl-2">"div"</span><span class="hl-1">,</span><br><br><span class="hl-1"> </span><span class="hl-4">// Using spring easing animate from [0 to 250] using `spring-out-in`</span><br><span class="hl-1"> translateX,</span><br><br><span class="hl-1"> </span><span class="hl-4">// You can interpolate between strings</span><br><span class="hl-1"> </span><span class="hl-4">// You can set the easing without an easing options object</span><br><span class="hl-1"> </span><span class="hl-4">// You can interpolate between more than 2 values</span><br><span class="hl-1"> </span><span class="hl-4">// Remember the `0` index of `SpringEasing` is an array of spring animation keyframes</span><br><span class="hl-1"> rotate: </span><span class="hl-0">SpringEasing</span><span class="hl-1">(</span><br><span class="hl-1"> [</span><span class="hl-2">"0turn"</span><span class="hl-1">, </span><span class="hl-6">1</span><span class="hl-1">, </span><span class="hl-6">0</span><span class="hl-1">, </span><span class="hl-6">0.5</span><span class="hl-1">],</span><br><span class="hl-1"> [SpringOutFrame, </span><span class="hl-6">1</span><span class="hl-1">, </span><span class="hl-6">100</span><span class="hl-1">, </span><span class="hl-6">10</span><span class="hl-1">, </span><span class="hl-6">0</span><span class="hl-1">]</span><br><span class="hl-1"> )[</span><span class="hl-6">0</span><span class="hl-1">],</span><br><br><span class="hl-1"> </span><span class="hl-4">// TIP... Use linear easing for the proper springy effect</span><br><span class="hl-1"> easing: </span><span class="hl-2">"linear"</span><span class="hl-1">,</span><br><br><span class="hl-1"> </span><span class="hl-4">// The optimal duration for this specific spring configuration, e.g. mass, velocity, damping, etc...</span><br><span class="hl-1"> duration,</span><br><span class="hl-1">});</span></code><button>Copy</button></pre><blockquote><p><em><strong>Note</strong>: make sure to read the comments above, as they are valuable resources for understanding what is happening.</em></p></blockquote><blockquote><p>Check out this demo on <a href="https://codepen.io/okikio/pen/MWEdzNg" target="_blank" rel="noopener">Codepen<span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a></p></blockquote><a id="md:showcase" class="tsd-anchor"></a><h2 id="showcase"><a href="#md:showcase">Showcase</a></h2><p>A couple sites/projects that use <code>spring-easing</code>:</p><ul><li>Your site/project here...</li></ul><a id="md:api" class="tsd-anchor"></a><h2 id="api"><a href="#md:api">API</a></h2><details open><summary><strong><em>What's New...</em></strong></summary>
<blockquote><p><strong><code>NEW</code></strong> CSS Spring Easing & support for the <code>linear()</code> easing function</p><a id="md:cssspringeasing" class="tsd-anchor"></a><h3 id="cssspringeasing"><a href="#md:cssspringeasing">CSSSpringEasing</a></h3><p>Generates a string that represents a set of values used with the linear-easing function to replicate spring animations, you can check out the linear-easing playground here <a href="https://linear-easing-generator.netlify.app/" target="_blank" rel="noopener">https://linear-easing-generator.netlify.app/<span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a> Or check out a demo on Codepen <a href="https://codepen.io/okikio/pen/vYVaEXM" target="_blank" rel="noopener">https://codepen.io/okikio/pen/vYVaEXM<span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a></p><p>CSS Spring Easing has 4 properties they are <code>easing</code> (all spring frame functions are supported), <code>numPoints</code> (the size of the Array the frmae function should create), <code>decimal</code> (the number of decimal places of the values within said Array) and <code>quality</code> (how detailed/smooth the spring easing should be)..</p><table><thead><tr><th>Properties</th><th>Default Value</th></tr></thead><tbody><tr><td><code>easing</code></td><td><code>spring(1, 100, 10, 0)</code></td></tr><tr><td><code>numPoints</code></td><td><code>50</code></td></tr><tr><td><code>decimal</code></td><td><code>3</code></td></tr><tr><td><code>quality</code></td><td><code>0.85</code></td></tr></tbody></table><p><code>CSSSpringEasing</code> is meant to be used with the <code>linear-easing()</code> function to replicate spring animations. It is based on the work done by <a href="https://github.com/jakearchibald" target="_blank" rel="noopener">Jake Archibald<span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a> in his <a href="https://github.com/jakearchibald/linear-easing-generator" target="_blank" rel="noopener">Linear Easing Generator<span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a>.</p><blockquote><p><strong>Note</strong>: This feature will only work on versions of browsers from ~a month ago (<code>Chrome & Edge 113</code>, and <code>Firefox 112</code>) except for <code>Safari</code> which doesn't support it yet.</p></blockquote><pre><code class="language-ts"><span class="hl-3">import</span><span class="hl-1"> { CSSSpringEasing } </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-2">"spring-easing"</span><span class="hl-1">;</span><br><span class="hl-1"> </span><br><span class="hl-3">let</span><span class="hl-1"> [easing, duration] </span><span class="hl-3">=</span><span class="hl-1"> </span><span class="hl-0">CSSSpringEasing</span><span class="hl-1">({</span><br><span class="hl-1"> easing: </span><span class="hl-2">"spring-out-in(1, 100, 10, 0)"</span><span class="hl-1">,</span><br><br><span class="hl-1"> </span><span class="hl-4">// You can change the size of Array for the SpringEasing function to generate</span><br><span class="hl-1"> numPoints: </span><span class="hl-6">200</span><span class="hl-1">,</span><br><br><span class="hl-1"> </span><span class="hl-4">// The number of decimal places to round, final values in the generated Array</span><br><span class="hl-1"> </span><span class="hl-4">// This option doesn't exist on {@link GenerateSpringFrames}</span><br><span class="hl-1"> decimal: </span><span class="hl-6">5</span><span class="hl-1">,</span><br><br><span class="hl-1"> </span><span class="hl-4">// How detailed/smooth the spring easing should be </span><br><span class="hl-1"> </span><span class="hl-4">// 0 means not smooth at all (shorter easing string)</span><br><span class="hl-1"> </span><span class="hl-4">// 1 means as smooth as possible (this means the resulting easing will be a longer string)</span><br><span class="hl-1"> quality: </span><span class="hl-6">0.85</span><br><span class="hl-1">});</span><br><br><span class="hl-1">document.</span><span class="hl-0">querySelector</span><span class="hl-1">(</span><span class="hl-2">"div"</span><span class="hl-1">).</span><span class="hl-0">animate</span><span class="hl-1">({</span><br><span class="hl-1"> translate: [</span><span class="hl-2">"0px"</span><span class="hl-1">, </span><span class="hl-2">"250px"</span><span class="hl-1">],</span><br><span class="hl-1"> rotate: [</span><span class="hl-2">"0turn"</span><span class="hl-1">, </span><span class="hl-2">"1turn"</span><span class="hl-1">, </span><span class="hl-2">"0turn"</span><span class="hl-1">, </span><span class="hl-2">"0.5turn"</span><span class="hl-1">],</span><br><span class="hl-1">}, {</span><br><span class="hl-1"> easing: </span><span class="hl-2">`linear(${</span><span class="hl-1">easing</span><span class="hl-2">})`</span><span class="hl-1">,</span><br><br><span class="hl-1"> </span><span class="hl-4">// The optimal duration for this specific spring</span><br><span class="hl-1"> duration</span><br><span class="hl-1">})</span></code><button>Copy</button></pre><blockquote><p><strong>Note</strong>: You can also use custom easings with <code>CSSSpringEasing</code> e.g.</p></blockquote><pre><code class="language-ts"><span class="hl-3">import</span><span class="hl-1"> { CSSSpringEasing, limit, registerEasingFunctions } </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-2">"spring-easing"</span><span class="hl-1">;</span><br><br><span class="hl-0">registerEasingFunctions</span><span class="hl-1">({</span><br><span class="hl-1"> </span><span class="hl-0">bounce</span><span class="hl-1">: </span><span class="hl-7">t</span><span class="hl-1"> </span><span class="hl-3">=></span><span class="hl-1"> {</span><br><span class="hl-1"> </span><span class="hl-3">let</span><span class="hl-1"> pow2</span><span class="hl-3">:</span><span class="hl-1"> </span><span class="hl-6">number</span><span class="hl-1">, b </span><span class="hl-3">=</span><span class="hl-1"> </span><span class="hl-6">4</span><span class="hl-1">;</span><br><span class="hl-1"> </span><span class="hl-3">while</span><span class="hl-1"> (t </span><span class="hl-3"><</span><span class="hl-1"> ((pow2 </span><span class="hl-3">=</span><span class="hl-1"> Math.</span><span class="hl-0">pow</span><span class="hl-1">(</span><span class="hl-6">2</span><span class="hl-1">, </span><span class="hl-3">--</span><span class="hl-1">b)) </span><span class="hl-3">-</span><span class="hl-1"> </span><span class="hl-6">1</span><span class="hl-1">) </span><span class="hl-3">/</span><span class="hl-1"> </span><span class="hl-6">11</span><span class="hl-1">) { }</span><br><span class="hl-1"> </span><span class="hl-3">return</span><span class="hl-1"> </span><span class="hl-6">1</span><span class="hl-1"> </span><span class="hl-3">/</span><span class="hl-1"> Math.</span><span class="hl-0">pow</span><span class="hl-1">(</span><span class="hl-6">4</span><span class="hl-1">, </span><span class="hl-6">3</span><span class="hl-1"> </span><span class="hl-3">-</span><span class="hl-1"> b) </span><span class="hl-3">-</span><span class="hl-1"> </span><span class="hl-6">7.5625</span><span class="hl-1"> </span><span class="hl-3">*</span><span class="hl-1"> Math.</span><span class="hl-0">pow</span><span class="hl-1">((pow2 </span><span class="hl-3">*</span><span class="hl-1"> </span><span class="hl-6">3</span><span class="hl-1"> </span><span class="hl-3">-</span><span class="hl-1"> </span><span class="hl-6">2</span><span class="hl-1">) </span><span class="hl-3">/</span><span class="hl-1"> </span><span class="hl-6">22</span><span class="hl-1"> </span><span class="hl-3">-</span><span class="hl-1"> t, </span><span class="hl-6">2</span><span class="hl-1">);</span><br><span class="hl-1"> },</span><br><span class="hl-1"> </span><span class="hl-0">elastic</span><span class="hl-1">: (</span><span class="hl-7">t</span><span class="hl-1">, </span><span class="hl-7">params</span><span class="hl-3">:</span><span class="hl-1"> </span><span class="hl-6">number</span><span class="hl-1">[] </span><span class="hl-3">=</span><span class="hl-1"> []) </span><span class="hl-3">=></span><span class="hl-1"> {</span><br><span class="hl-1"> </span><span class="hl-3">let</span><span class="hl-1"> [amplitude </span><span class="hl-3">=</span><span class="hl-1"> </span><span class="hl-6">1</span><span class="hl-1">, period </span><span class="hl-3">=</span><span class="hl-1"> </span><span class="hl-6">0.5</span><span class="hl-1">] </span><span class="hl-3">=</span><span class="hl-1"> params;</span><br><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-6">a</span><span class="hl-1"> </span><span class="hl-3">=</span><span class="hl-1"> </span><span class="hl-0">limit</span><span class="hl-1">(amplitude, </span><span class="hl-6">1</span><span class="hl-1">, </span><span class="hl-6">10</span><span class="hl-1">);</span><br><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-6">p</span><span class="hl-1"> </span><span class="hl-3">=</span><span class="hl-1"> </span><span class="hl-0">limit</span><span class="hl-1">(period, </span><span class="hl-6">0.1</span><span class="hl-1">, </span><span class="hl-6">2</span><span class="hl-1">);</span><br><span class="hl-1"> </span><span class="hl-3">if</span><span class="hl-1"> (t </span><span class="hl-3">===</span><span class="hl-1"> </span><span class="hl-6">0</span><span class="hl-1"> </span><span class="hl-3">||</span><span class="hl-1"> t </span><span class="hl-3">===</span><span class="hl-1"> </span><span class="hl-6">1</span><span class="hl-1">) </span><span class="hl-3">return</span><span class="hl-1"> t;</span><br><span class="hl-1"> </span><span class="hl-3">return</span><span class="hl-1"> (</span><span class="hl-3">-</span><span class="hl-1">a </span><span class="hl-3">*</span><br><span class="hl-1"> Math.</span><span class="hl-0">pow</span><span class="hl-1">(</span><span class="hl-6">2</span><span class="hl-1">, </span><span class="hl-6">10</span><span class="hl-1"> </span><span class="hl-3">*</span><span class="hl-1"> (t </span><span class="hl-3">-</span><span class="hl-1"> </span><span class="hl-6">1</span><span class="hl-1">)) </span><span class="hl-3">*</span><br><span class="hl-1"> Math.</span><span class="hl-0">sin</span><span class="hl-1">(</span><br><span class="hl-1"> ((t </span><span class="hl-3">-</span><span class="hl-1"> </span><span class="hl-6">1</span><span class="hl-1"> </span><span class="hl-3">-</span><span class="hl-1"> (p </span><span class="hl-3">/</span><span class="hl-1"> (Math.</span><span class="hl-6">PI</span><span class="hl-1"> </span><span class="hl-3">*</span><span class="hl-1"> </span><span class="hl-6">2</span><span class="hl-1">)) </span><span class="hl-3">*</span><span class="hl-1"> Math.</span><span class="hl-0">asin</span><span class="hl-1">(</span><span class="hl-6">1</span><span class="hl-1"> </span><span class="hl-3">/</span><span class="hl-1"> a)) </span><span class="hl-3">*</span><span class="hl-1"> (Math.</span><span class="hl-6">PI</span><span class="hl-1"> </span><span class="hl-3">*</span><span class="hl-1"> </span><span class="hl-6">2</span><span class="hl-1">)) </span><span class="hl-3">/</span><span class="hl-1"> p</span><br><span class="hl-1"> )</span><br><span class="hl-1"> );</span><br><span class="hl-1"> }</span><br><span class="hl-1">});</span><br><br><span class="hl-0">CSSSpringEasing</span><span class="hl-1">(</span><span class="hl-2">"bounce"</span><span class="hl-1">) </span><span class="hl-4">// ["0, 0.013, 0.015, 0.006 8.1%, 0.046 13.5%, 0.06, 0.062, 0.054, 0.034, 0.003 27%, 0.122, 0.206 37.8%, 0.232, 0.246, 0.25, 0.242, 0.224, 0.194, 0.153 56.8%, 0.039 62.2%, 0.066 64.9%, 0.448 73%, 0.646, 0.801 83.8%, 0.862 86.5%, 0.95 91.9%, 0.978, 0.994, 1", ...]</span><br><span class="hl-0">CSSSpringEasing</span><span class="hl-1">(</span><span class="hl-2">"elastic(1, 0.5)"</span><span class="hl-1">) </span><span class="hl-4">// ["0, -0.005 32.4%, 0.006 40.5%, 0.034 51.4%, 0.033 56.8%, 0.022, 0.003, -0.026 64.9%, -0.185 75.7%, -0.204, -0.195, -0.146, -0.05, 0.1 89.2%, 1", ...]</span></code><button>Copy</button></pre><a id="md:getoptimizedpoints" class="tsd-anchor"></a><h3 id="getoptimizedpoints"><a href="#md:getoptimizedpoints">getOptimizedPoints</a></h3><p>This function generates an optimized set of points to be used with the <code>linear-easing()</code> function using the Ramer-Douglas-Peucker algorithm and rounds the x and y values of the resulting points.</p><pre><code class="language-ts"><span class="hl-3">import</span><span class="hl-1"> { getOptimizedPoints } </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-2">"spring-easing"</span><span class="hl-1">;</span><br><br><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-6">points</span><span class="hl-1"> </span><span class="hl-3">=</span><span class="hl-1"> [[</span><span class="hl-6">0</span><span class="hl-1">, </span><span class="hl-6">0</span><span class="hl-1">], [</span><span class="hl-6">0.1</span><span class="hl-1">, </span><span class="hl-6">0.2</span><span class="hl-1">], [</span><span class="hl-6">0.5</span><span class="hl-1">, </span><span class="hl-6">1</span><span class="hl-1">], [</span><span class="hl-6">0.9</span><span class="hl-1">, </span><span class="hl-6">0.2</span><span class="hl-1">], [</span><span class="hl-6">1</span><span class="hl-1">, </span><span class="hl-6">0</span><span class="hl-1">]];</span><br><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-6">round</span><span class="hl-1"> </span><span class="hl-3">=</span><span class="hl-1"> </span><span class="hl-6">2</span><span class="hl-1">;</span><br><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-6">simplify</span><span class="hl-1"> </span><span class="hl-3">=</span><span class="hl-1"> </span><span class="hl-6">0.1</span><span class="hl-1">;</span><br><br><span class="hl-1">console.</span><span class="hl-0">log</span><span class="hl-1">(</span><span class="hl-0">getOptimizedPoints</span><span class="hl-1">(points, simplify, round)); </span><span class="hl-4">//= [[0, 0], [0.5, 1], [1, 0]]</span></code><button>Copy</button></pre><a id="md:getlinearsyntax" class="tsd-anchor"></a><h3 id="getlinearsyntax"><a href="#md:getlinearsyntax">getLinearSyntax</a></h3><p>This function converts a given set of points into an array of strings in a this format <code>["value percent%", ...]</code> e.g. <code>["0", "0.25 13.8%", "0.6 45.6%", "0.1", "0.4 60%", ...]</code>. It's used to generate the syntax for the <code>linear-easing</code> function.</p><pre><code class="language-ts"><span class="hl-3">import</span><span class="hl-1"> { getLinearSyntax } </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-2">"spring-easing"</span><span class="hl-1">;</span><br><br><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-6">points</span><span class="hl-1"> </span><span class="hl-3">=</span><span class="hl-1"> [[</span><span class="hl-6">0</span><span class="hl-1">, </span><span class="hl-6">0</span><span class="hl-1">], [</span><span class="hl-6">0.1</span><span class="hl-1">, </span><span class="hl-6">0.2</span><span class="hl-1">], [</span><span class="hl-6">0.5</span><span class="hl-1">, </span><span class="hl-6">1</span><span class="hl-1">], [</span><span class="hl-6">0.9</span><span class="hl-1">, </span><span class="hl-6">0.2</span><span class="hl-1">], [</span><span class="hl-6">1</span><span class="hl-1">, </span><span class="hl-6">0</span><span class="hl-1">]];</span><br><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-6">round</span><span class="hl-1"> </span><span class="hl-3">=</span><span class="hl-1"> </span><span class="hl-6">2</span><span class="hl-1">;</span><br><br><span class="hl-1">console.</span><span class="hl-0">log</span><span class="hl-1">(</span><span class="hl-0">getLinearSyntax</span><span class="hl-1">(points, round)); </span><span class="hl-4">//= [ '0', '0.2 10%', '1', '0.2 90%', '0' ]</span></code><button>Copy</button></pre></blockquote><blockquote><p><strong><code>RE-INSTATED</code></strong> <em>Added batch version of <code>SpringEasing</code> and the Interpolation functions which use a new syntax.</em></p><p><em>The other version of <code>spring-easing</code> interpolation functions follow this syntax <code>(t, values, decimal) => string | number | any</code>, batch interpolation function use this new syntax <code>(arr_t, values, decimal) => string[] | number[] | any[]</code>.</em></p><p><em>The key difference between both syntaxes are the parameters each function takes and the return value of each function.</em></p><p><em>The older syntax returned instantaneous frame values at a specific t-value, but the new syntax returns all the frames that make the entire animation, allowing for performance optimizations that couldn't be done before.</em></p><p><em>For the most part this shouldn't leave too much of an effect, but for those high-perf. applications this new batch synatax should prove useful.</em>e.g.</p><pre><code class="language-ts"><span class="hl-3">function</span><span class="hl-1"> </span><span class="hl-0">batchInterpolateNumber</span><span class="hl-1">(</span><span class="hl-7">arr_t</span><span class="hl-3">:</span><span class="hl-1"> </span><span class="hl-6">number</span><span class="hl-1">[], </span><span class="hl-7">values</span><span class="hl-3">:</span><span class="hl-1"> </span><span class="hl-6">number</span><span class="hl-1">[], </span><span class="hl-7">decimal</span><span class="hl-1"> </span><span class="hl-3">=</span><span class="hl-1"> </span><span class="hl-6">3</span><span class="hl-1">) {</span><br><span class="hl-1"> </span><span class="hl-4">// nth index</span><br><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-6">n</span><span class="hl-1"> </span><span class="hl-3">=</span><span class="hl-1"> values.</span><span class="hl-6">length</span><span class="hl-1"> </span><span class="hl-3">-</span><span class="hl-1"> </span><span class="hl-6">1</span><span class="hl-1">;</span><br><br><span class="hl-1"> </span><span class="hl-3">return</span><span class="hl-1"> arr_t.</span><span class="hl-0">map</span><span class="hl-1">(</span><span class="hl-7">t</span><span class="hl-1"> </span><span class="hl-3">=></span><span class="hl-1"> {</span><br><span class="hl-1"> </span><span class="hl-4">// The current index given t</span><br><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-6">i</span><span class="hl-1"> </span><span class="hl-3">=</span><span class="hl-1"> </span><span class="hl-0">limit</span><span class="hl-1">(Math.</span><span class="hl-0">floor</span><span class="hl-1">(t </span><span class="hl-3">*</span><span class="hl-1"> n), </span><span class="hl-6">0</span><span class="hl-1">, n </span><span class="hl-3">-</span><span class="hl-1"> </span><span class="hl-6">1</span><span class="hl-1">);</span><br><br><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-6">start</span><span class="hl-1"> </span><span class="hl-3">=</span><span class="hl-1"> values[i];</span><br><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-6">end</span><span class="hl-1"> </span><span class="hl-3">=</span><span class="hl-1"> values[i </span><span class="hl-3">+</span><span class="hl-1"> </span><span class="hl-6">1</span><span class="hl-1">];</span><br><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-6">progress</span><span class="hl-1"> </span><span class="hl-3">=</span><span class="hl-1"> (t </span><span class="hl-3">-</span><span class="hl-1"> i </span><span class="hl-3">/</span><span class="hl-1"> n) </span><span class="hl-3">*</span><span class="hl-1"> n;</span><br><br><span class="hl-1"> </span><span class="hl-3">return</span><span class="hl-1"> </span><span class="hl-0">toFixed</span><span class="hl-1">(</span><span class="hl-0">scale</span><span class="hl-1">(progress, start, end), decimal);</span><br><span class="hl-1"> });</span><br><span class="hl-1">}</span><br><br><span class="hl-0">BatchSpringEasing</span><span class="hl-1">([</span><span class="hl-6">0</span><span class="hl-1">, </span><span class="hl-6">250</span><span class="hl-1">], </span><span class="hl-2">`spring`</span><span class="hl-1">, batchInterpolateNumber)</span></code><button>Copy</button></pre></blockquote><blockquote><p><strong><code>RE-INSTATED</code></strong> <em>There is a new <code>toAnimationFrames</code> function that converts interpolation functions written in this style <code>(t, values, decimal) => { ... }</code> to work in <code>BatchSpringEasing</code>.</em> e.g.</p><pre><code class="language-ts"><span class="hl-3">import</span><span class="hl-1"> { BatchSpringEasing, toAnimationFrames, toFixed, scale, limit } </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-2">"spring-easing"</span><span class="hl-1">;</span><br><br><span class="hl-3">function</span><span class="hl-1"> </span><span class="hl-0">interpolateNumber</span><span class="hl-1">(</span><span class="hl-7">t</span><span class="hl-3">:</span><span class="hl-1"> </span><span class="hl-6">number</span><span class="hl-1">, </span><span class="hl-7">values</span><span class="hl-3">:</span><span class="hl-1"> </span><span class="hl-6">number</span><span class="hl-1">[], </span><span class="hl-7">decimal</span><span class="hl-1"> </span><span class="hl-3">=</span><span class="hl-1"> </span><span class="hl-6">3</span><span class="hl-1">) {</span><br><span class="hl-1"> </span><span class="hl-4">// nth index</span><br><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-6">n</span><span class="hl-1"> </span><span class="hl-3">=</span><span class="hl-1"> values.</span><span class="hl-6">length</span><span class="hl-1"> </span><span class="hl-3">-</span><span class="hl-1"> </span><span class="hl-6">1</span><span class="hl-1">;</span><br><br><span class="hl-1"> </span><span class="hl-4">// The current index given t</span><br><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-6">i</span><span class="hl-1"> </span><span class="hl-3">=</span><span class="hl-1"> </span><span class="hl-0">limit</span><span class="hl-1">(Math.</span><span class="hl-0">floor</span><span class="hl-1">(t </span><span class="hl-3">*</span><span class="hl-1"> n), </span><span class="hl-6">0</span><span class="hl-1">, n </span><span class="hl-3">-</span><span class="hl-1"> </span><span class="hl-6">1</span><span class="hl-1">);</span><br><br><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-6">start</span><span class="hl-1"> </span><span class="hl-3">=</span><span class="hl-1"> values[i];</span><br><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-6">end</span><span class="hl-1"> </span><span class="hl-3">=</span><span class="hl-1"> values[i </span><span class="hl-3">+</span><span class="hl-1"> </span><span class="hl-6">1</span><span class="hl-1">];</span><br><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-6">progress</span><span class="hl-1"> </span><span class="hl-3">=</span><span class="hl-1"> (t </span><span class="hl-3">-</span><span class="hl-1"> i </span><span class="hl-3">/</span><span class="hl-1"> n) </span><span class="hl-3">*</span><span class="hl-1"> n;</span><br><br><span class="hl-1"> </span><span class="hl-3">return</span><span class="hl-1"> </span><span class="hl-0">toFixed</span><span class="hl-1">(</span><span class="hl-0">scale</span><span class="hl-1">(progress, start, end), decimal);</span><br><span class="hl-1">}</span><br><br><span class="hl-3">function</span><span class="hl-1"> </span><span class="hl-0">interpolatePixels</span><span class="hl-1">(</span><span class="hl-7">t</span><span class="hl-3">:</span><span class="hl-1"> </span><span class="hl-6">number</span><span class="hl-1">, </span><span class="hl-7">values</span><span class="hl-3">:</span><span class="hl-1"> </span><span class="hl-6">number</span><span class="hl-1">[], </span><span class="hl-7">decimal</span><span class="hl-1"> </span><span class="hl-3">=</span><span class="hl-1"> </span><span class="hl-6">3</span><span class="hl-1">) { </span><br><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-6">result</span><span class="hl-1"> </span><span class="hl-3">=</span><span class="hl-1"> </span><span class="hl-0">interpolateNumber</span><span class="hl-1">(t, values, decimal);</span><br><span class="hl-1"> </span><span class="hl-3">return</span><span class="hl-1"> </span><span class="hl-2">`${</span><span class="hl-1">result</span><span class="hl-2">}px`</span><span class="hl-1">;</span><br><span class="hl-1">}</span><br><br><span class="hl-0">BatchSpringEasing</span><span class="hl-1">(</span><br><span class="hl-1"> [</span><span class="hl-6">0</span><span class="hl-1">, </span><span class="hl-6">250</span><span class="hl-1">], </span><br><span class="hl-1"> </span><span class="hl-2">'spring'</span><span class="hl-1">, </span><br><span class="hl-1"> </span><span class="hl-0">toAnimationFrames</span><span class="hl-1">(interpolatePixels)</span><br><span class="hl-1">);</span></code><button>Copy</button></pre></blockquote><blockquote><p><strong><code>NEW</code></strong> <em>Optimized perf. of spring generation w/ help from <a href="https://twitter.com/jaffathecake" target="_blank" rel="noopener">@jakearchibald<span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a></em></p></blockquote><blockquote><p><strong><code>NEW</code></strong> <em><code>mass</code>, <code>stiffness</code>, <code>damping</code>, and <code>velocity</code> now have a smaller minimum limit of <code>0.0001</code> instead of <code>0.1</code></em></p></blockquote><blockquote><p><strong><code>REVERT</code></strong> <em>The new interpolation syntax has been reverted and removed; <code>instantNumber</code>, etc... functions have been renamed to <code>interpolateNumber</code>, etc...</em></p></blockquote><blockquote><p><strong><code>NEW</code></strong> <em>Re-introduced instantaneous interpolation functions.</em>e.g.</p><pre><code class="language-ts"><span class="hl-3">import</span><span class="hl-1"> { interpolateNumber, interpolateString, interpolateSequence, interpolateComplex } </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-2">"spring-easing"</span><span class="hl-1">;</span></code><button>Copy</button></pre><p>These functions represent the interpolated value at a specific instance in time, where time is represented by <code>t</code> with a range of <code>0</code> to <code>1</code>.You can use these functions as building blocks to create your own custom interpolation functions.</p></blockquote><blockquote><p><strong><code>NEW</code></strong> <em>(deprecated) <code>interpolateUsingIndex</code> is now an alias of <code>interpolateSequence</code>, it still keeps the same functionality.</em>The recommendation is to use <code>interpolateSequence</code> instead of <code>interpolateUsingIndex</code>, but you can still keep using <code>interpolateUsingIndex</code>, but beware it can be removed in future versions.</p></blockquote><blockquote><p><strike> <strong><code>NEW</code></strong> <em>Re-introduced instantaneous interpolation functions.</em>e.g.</strike></p><strike><pre><code class="language-ts"><span class="hl-3">import</span><span class="hl-1"> { instantNumber, instantString, instantSequence, instanceComplex } </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-2">"spring-easing"</span><span class="hl-1">;</span></code><button>Copy</button></pre><p>These functions represent the interpolated value at a specific instance in time, where time is represented by <code>t</code> with a range of <code>0</code> to <code>1</code>.You can use these functions as building blocks to create your own custom interpolation functions.</p></strike> </blockquote><blockquote><p><strike> <strong><code>BREAKING CHANGE</code></strong> <em>Interpolation functions use a new syntax.</em></strike></p><strike><p><em>In older versions of <code>spring-easing</code> interpolation functions used to follow a syntax called the instantaneous interpolation function <code>(t, values, decimal) => string | number | any</code>, the new syntax is called interpolation function <code>(frames, values, decimal) => string[] | number[] | any[]</code>.</em></p><p><em>The key difference between both syntaxes are the parameters each function takes and the return value of each function.</em></p><p><em>The older syntax returned instantaneous frame values at a specific t-value, but the new syntax returns all the frames that make the entire animation, allowing for performance optimizations that couldn't be done before.</em></p><p><em>For the most part this shouldn't leave too much of an effect as all the built-in interpolation functions have been updated to use the new synatax.</em>e.g.</p><pre><code class="language-ts"><span class="hl-3">function</span><span class="hl-1"> </span><span class="hl-0">interpolateNumber</span><span class="hl-1">(</span><span class="hl-7">frames</span><span class="hl-3">:</span><span class="hl-1"> </span><span class="hl-6">number</span><span class="hl-1">[], </span><span class="hl-7">values</span><span class="hl-3">:</span><span class="hl-1"> </span><span class="hl-6">number</span><span class="hl-1">[], </span><span class="hl-7">decimal</span><span class="hl-1"> </span><span class="hl-3">=</span><span class="hl-1"> </span><span class="hl-6">3</span><span class="hl-1">) {</span><br><span class="hl-1"> </span><span class="hl-4">// nth index</span><br><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-6">n</span><span class="hl-1"> </span><span class="hl-3">=</span><span class="hl-1"> values.</span><span class="hl-6">length</span><span class="hl-1"> </span><span class="hl-3">-</span><span class="hl-1"> </span><span class="hl-6">1</span><span class="hl-1">;</span><br><br><span class="hl-1"> </span><span class="hl-3">return</span><span class="hl-1"> frames.</span><span class="hl-0">map</span><span class="hl-1">(</span><span class="hl-7">t</span><span class="hl-1"> </span><span class="hl-3">=></span><span class="hl-1"> {</span><br><span class="hl-1"> </span><span class="hl-4">// The current index given t</span><br><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-6">i</span><span class="hl-1"> </span><span class="hl-3">=</span><span class="hl-1"> </span><span class="hl-0">limit</span><span class="hl-1">(Math.</span><span class="hl-0">floor</span><span class="hl-1">(t </span><span class="hl-3">*</span><span class="hl-1"> n), </span><span class="hl-6">0</span><span class="hl-1">, n </span><span class="hl-3">-</span><span class="hl-1"> </span><span class="hl-6">1</span><span class="hl-1">);</span><br><br><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-6">start</span><span class="hl-1"> </span><span class="hl-3">=</span><span class="hl-1"> values[i];</span><br><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-6">end</span><span class="hl-1"> </span><span class="hl-3">=</span><span class="hl-1"> values[i </span><span class="hl-3">+</span><span class="hl-1"> </span><span class="hl-6">1</span><span class="hl-1">];</span><br><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-6">progress</span><span class="hl-1"> </span><span class="hl-3">=</span><span class="hl-1"> (t </span><span class="hl-3">-</span><span class="hl-1"> i </span><span class="hl-3">/</span><span class="hl-1"> n) </span><span class="hl-3">*</span><span class="hl-1"> n;</span><br><br><span class="hl-1"> </span><span class="hl-3">return</span><span class="hl-1"> </span><span class="hl-0">toFixed</span><span class="hl-1">(</span><span class="hl-0">scale</span><span class="hl-1">(progress, start, end), decimal);</span><br><span class="hl-1"> });</span><br><span class="hl-1">}</span><br><br><span class="hl-0">SpringEasing</span><span class="hl-1">([</span><span class="hl-6">0</span><span class="hl-1">, </span><span class="hl-6">250</span><span class="hl-1">], </span><span class="hl-2">`spring`</span><span class="hl-1">, interpolateNumber)</span></code><button>Copy</button></pre></strike> </blockquote><blockquote><p><strike> <strong><code>NEW</code></strong> <em>There is a new <code>toAnimationFrames</code> function that be used on instantaneous interpolation functions, to transform them into complete animation interpolation functions.</em> e.g.</strike></p><strike><pre><code class="language-ts"><span class="hl-3">import</span><span class="hl-1"> { SpringEasing, toAnimationFrames, toFixed, scale, limit } </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-2">"spring-easing"</span><span class="hl-1">;</span><br><br><span class="hl-3">function</span><span class="hl-1"> </span><span class="hl-0">interpolateNumber</span><span class="hl-1">(</span><span class="hl-7">t</span><span class="hl-3">:</span><span class="hl-1"> </span><span class="hl-6">number</span><span class="hl-1">, </span><span class="hl-7">values</span><span class="hl-3">:</span><span class="hl-1"> </span><span class="hl-6">number</span><span class="hl-1">[], </span><span class="hl-7">decimal</span><span class="hl-1"> </span><span class="hl-3">=</span><span class="hl-1"> </span><span class="hl-6">3</span><span class="hl-1">) {</span><br><span class="hl-1"> </span><span class="hl-4">// nth index</span><br><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-6">n</span><span class="hl-1"> </span><span class="hl-3">=</span><span class="hl-1"> values.</span><span class="hl-6">length</span><span class="hl-1"> </span><span class="hl-3">-</span><span class="hl-1"> </span><span class="hl-6">1</span><span class="hl-1">;</span><br><br><span class="hl-1"> </span><span class="hl-4">// The current index given t</span><br><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-6">i</span><span class="hl-1"> </span><span class="hl-3">=</span><span class="hl-1"> </span><span class="hl-0">limit</span><span class="hl-1">(Math.</span><span class="hl-0">floor</span><span class="hl-1">(t </span><span class="hl-3">*</span><span class="hl-1"> n), </span><span class="hl-6">0</span><span class="hl-1">, n </span><span class="hl-3">-</span><span class="hl-1"> </span><span class="hl-6">1</span><span class="hl-1">);</span><br><br><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-6">start</span><span class="hl-1"> </span><span class="hl-3">=</span><span class="hl-1"> values[i];</span><br><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-6">end</span><span class="hl-1"> </span><span class="hl-3">=</span><span class="hl-1"> values[i </span><span class="hl-3">+</span><span class="hl-1"> </span><span class="hl-6">1</span><span class="hl-1">];</span><br><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-6">progress</span><span class="hl-1"> </span><span class="hl-3">=</span><span class="hl-1"> (t </span><span class="hl-3">-</span><span class="hl-1"> i </span><span class="hl-3">/</span><span class="hl-1"> n) </span><span class="hl-3">*</span><span class="hl-1"> n;</span><br><br><span class="hl-1"> </span><span class="hl-3">return</span><span class="hl-1"> </span><span class="hl-0">toFixed</span><span class="hl-1">(</span><span class="hl-0">scale</span><span class="hl-1">(progress, start, end), decimal);</span><br><span class="hl-1">}</span><br><br><span class="hl-3">function</span><span class="hl-1"> </span><span class="hl-0">interpolatePixels</span><span class="hl-1">(</span><span class="hl-7">t</span><span class="hl-3">:</span><span class="hl-1"> </span><span class="hl-6">number</span><span class="hl-1">, </span><span class="hl-7">values</span><span class="hl-3">:</span><span class="hl-1"> </span><span class="hl-6">number</span><span class="hl-1">[], </span><span class="hl-7">decimal</span><span class="hl-1"> </span><span class="hl-3">=</span><span class="hl-1"> </span><span class="hl-6">3</span><span class="hl-1">) { </span><br><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-6">result</span><span class="hl-1"> </span><span class="hl-3">=</span><span class="hl-1"> </span><span class="hl-0">interpolateNumber</span><span class="hl-1">(t, values, decimal);</span><br><span class="hl-1"> </span><span class="hl-3">return</span><span class="hl-1"> </span><span class="hl-2">`${</span><span class="hl-1">result</span><span class="hl-2">}px`</span><span class="hl-1">;</span><br><span class="hl-1">}</span><br><br><span class="hl-0">SpringEasing</span><span class="hl-1">(</span><br><span class="hl-1"> [</span><span class="hl-6">0</span><span class="hl-1">, </span><span class="hl-6">250</span><span class="hl-1">], </span><br><span class="hl-1"> </span><span class="hl-2">'spring'</span><span class="hl-1">, </span><br><span class="hl-1"> </span><span class="hl-0">toAnimationFrames</span><span class="hl-1">(interpolatePixels)</span><br><span class="hl-1">);</span></code><button>Copy</button></pre></strike></blockquote><blockquote><p><strong><code>NEW</code></strong> <em>Easily register new easing functions.</em>e.g.</p><pre><code class="language-ts"><span class="hl-3">import</span><span class="hl-1"> { SpringEasing, registerEasingFunction } </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-2">"spring-easing"</span><span class="hl-1">;</span><br><br><span class="hl-0">registerEasingFunction</span><span class="hl-1">(</span><span class="hl-2">"linear"</span><span class="hl-1">, (</span><span class="hl-7">t</span><span class="hl-1">) </span><span class="hl-3">=></span><span class="hl-1"> t);</span><br><span class="hl-0">registerEasingFunctions</span><span class="hl-1">({</span><br><span class="hl-1"> </span><span class="hl-0">quad</span><span class="hl-1">: (</span><span class="hl-7">t</span><span class="hl-1">) </span><span class="hl-3">=></span><span class="hl-1"> Math.</span><span class="hl-0">pow</span><span class="hl-1">(t, </span><span class="hl-6">2</span><span class="hl-1">),</span><br><span class="hl-1"> </span><span class="hl-0">cubic</span><span class="hl-1">: (</span><span class="hl-7">t</span><span class="hl-1">) </span><span class="hl-3">=></span><span class="hl-1"> Math.</span><span class="hl-0">pow</span><span class="hl-1">(t, </span><span class="hl-6">3</span><span class="hl-1">),</span><br><span class="hl-1">});</span><br><br><span class="hl-0">SpringEasing</span><span class="hl-1">(</span><br><span class="hl-1"> [</span><span class="hl-6">0</span><span class="hl-1">, </span><span class="hl-6">250</span><span class="hl-1">], </span><br><span class="hl-1"> </span><span class="hl-2">'linear'</span><br><span class="hl-1">);</span><br><br><span class="hl-0">SpringEasing</span><span class="hl-1">(</span><br><span class="hl-1"> [</span><span class="hl-6">0</span><span class="hl-1">, </span><span class="hl-6">250</span><span class="hl-1">], </span><br><span class="hl-1"> </span><span class="hl-2">'quad'</span><br><span class="hl-1">);</span></code><button>Copy</button></pre></blockquote><blockquote><p><strong><code>NEW</code></strong> <em>SpringEasing now support interpolating between strings. It treats the units of the first value as the units for the rest of the values to interpolate between.</em>e.g.</p><pre><code class="language-ts"><span class="hl-0">SpringEasing</span><span class="hl-1">([</span><span class="hl-2">"0turn"</span><span class="hl-1">, </span><span class="hl-2">"1px"</span><span class="hl-1">, </span><span class="hl-2">"18rem"</span><span class="hl-1">, </span><span class="hl-2">"125deg"</span><span class="hl-1">, </span><span class="hl-6">25</span><span class="hl-1">], </span><span class="hl-3">...</span><span class="hl-1">)</span></code><button>Copy</button></pre><p><em><strong>Important</strong> All the values above get transformed to <code>["0turn", "1turn", "18turn", "125turn", "25turn"]</code>, before being interpolated.</em></p></blockquote><blockquote><p><strong><code>NEW</code></strong> <em><code>interpolateStrings</code>, <code>interpolateUsingIndex</code>, and <code>interpolateComplex</code>, are now built-in, they allow for supporting string keyframes.</em></p></blockquote><blockquote><p><strong><code>NEW</code></strong> <em>Custom interpolation functions are now supported.</em>e.g.</p><pre><code class="language-ts"><span class="hl-3">import</span><span class="hl-1"> { interpolateNumber, toFixed, scale, limit } </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-2">"spring-easing"</span><span class="hl-1">;</span><br><span class="hl-4">// ...</span><br><span class="hl-3">export</span><span class="hl-1"> </span><span class="hl-3">function</span><span class="hl-1"> </span><span class="hl-0">interpolateColor</span><span class="hl-1">(</span><span class="hl-7">t</span><span class="hl-3">:</span><span class="hl-1"> </span><span class="hl-6">number</span><span class="hl-1">, </span><span class="hl-7">values</span><span class="hl-3">:</span><span class="hl-1"> </span><span class="hl-6">string</span><span class="hl-1">[], </span><span class="hl-7">decimal</span><span class="hl-1"> </span><span class="hl-3">=</span><span class="hl-1"> </span><span class="hl-6">3</span><span class="hl-1">) {</span><br><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-6">color</span><span class="hl-1"> </span><span class="hl-3">=</span><span class="hl-1"> </span><span class="hl-0">transpose</span><span class="hl-1">(</span><span class="hl-3">...</span><span class="hl-1">values.</span><span class="hl-0">map</span><span class="hl-1">((</span><span class="hl-7">v</span><span class="hl-1">) </span><span class="hl-3">=></span><span class="hl-1"> </span><span class="hl-0">rgba</span><span class="hl-1">(v)))</span><br><span class="hl-1"> .</span><span class="hl-0">map</span><span class="hl-1">((</span><span class="hl-7">colors</span><span class="hl-3">:</span><span class="hl-1"> </span><span class="hl-6">number</span><span class="hl-1">[], </span><span class="hl-7">i</span><span class="hl-1">) </span><span class="hl-3">=></span><span class="hl-1"> {</span><br><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-6">result</span><span class="hl-1"> </span><span class="hl-3">=</span><span class="hl-1"> </span><span class="hl-0">interpolateNumber</span><span class="hl-1">(t, colors);</span><br><span class="hl-1"> </span><span class="hl-3">return</span><span class="hl-1"> i </span><span class="hl-3"><</span><span class="hl-1"> </span><span class="hl-6">3</span><span class="hl-1"> </span><span class="hl-3">?</span><span class="hl-1"> Math.</span><span class="hl-0">round</span><span class="hl-1">(result) </span><span class="hl-3">:</span><span class="hl-1"> </span><span class="hl-0">toFixed</span><span class="hl-1">(result, decimal);</span><br><span class="hl-1"> });</span><br><br><span class="hl-1"> </span><span class="hl-3">return</span><span class="hl-1"> </span><span class="hl-2">`rgba(${</span><span class="hl-1">color</span><span class="hl-2">.</span><span class="hl-0">join</span><span class="hl-2">()</span><span class="hl-2">})`</span><span class="hl-1">;</span><br><span class="hl-1">}</span><br><br><span class="hl-0">SpringEasing</span><span class="hl-1">([</span><span class="hl-2">"red"</span><span class="hl-1">, </span><span class="hl-2">"green"</span><span class="hl-1">, </span><span class="hl-2">"#4f4"</span><span class="hl-1">], </span><span class="hl-2">"spring"</span><span class="hl-1">, interpolateColor);</span></code><button>Copy</button></pre><p><em><strong>Important</strong> The logic for color interpolation is defined in this <a href="https://github.com/okikio/spring-easing/blob/main/tests/utils/interpolate-color.ts" target="_blank" rel="noopener">tests/utils/interpolate-color.ts<span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a>.</em></p></blockquote></details>
<p>The API of <code>spring-easing</code> is pretty straight forward, the <code>SpringEasing</code> function generates an array of values using a frame functions, which in turn creates the effect of spring easing.</p><p>To use this properly make sure to set the easing animation option to "linear".Check out a demo of <code>SpringEasing</code> at <a href="https://codepen.io/okikio/pen/MWEdzNg" target="_blank" rel="noopener">https://codepen.io/okikio/pen/MWEdzNg<span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a></p><p><code>SpringEasing</code> has 3 properties they are <code>easing</code> (all the easings from <a href="https://spring-easing.okikio.dev/modules.html#EasingOptions" target="_blank" rel="noopener">EasingFunctions<span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a> are supported on top of frame functions like <code>SpringFrame</code>, <code>SpringFrameOut</code>, etc..), <code>numPoints</code> (the size of the Array the frame function should create), and <code>decimal</code> (the number of decimal places of the values within said Array).</p><table><thead><tr><th>Properties</th><th>Default Value</th></tr></thead><tbody><tr><td><code>easing</code></td><td><code>spring(1, 100, 10, 0)</code></td></tr><tr><td><code>numPoints</code></td><td><code>50</code></td></tr><tr><td><code>decimal</code></td><td><code>3</code></td></tr></tbody></table><p>By default, Spring Easing support easings in the form,</p><table><thead><tr><th align="left">constant</th><th align="left">accelerate</th><th align="left">decelerate</th><th align="left">accelerate-decelerate</th><th align="left">decelerate-accelerate</th></tr></thead><tbody><tr><td align="left"></td><td align="left">spring / spring-in</td><td align="left">spring-out</td><td align="left">spring-in-out</td><td align="left">spring-out-in</td></tr></tbody></table><p>All <strong>Spring</strong> easing's can be configured using theses parameters,</p><p><code>spring-*(mass, stiffness, damping, velocity)</code></p><p>Each parameter comes with these defaults</p><table><thead><tr><th>Parameter</th><th>Default Value</th></tr></thead><tbody><tr><td>mass</td><td><code>1</code></td></tr><tr><td>stiffness</td><td><code>100</code></td></tr><tr><td>damping</td><td><code>10</code></td></tr><tr><td>velocity</td><td><code>0</code></td></tr></tbody></table><p>To understand what each of the parameters of <code>SpringEasing</code> mean and how they work I suggest looking through the <a href="https://spring-easing.okikio.dev/functions/springeasing" target="_blank" rel="noopener">SpringEasing API Documentation<span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a></p><blockquote><p><em><strong>Note:</strong> the return value of the <code>SpringEasing</code> function is actually <code>[Array of keyframes, duration]</code>, in that order.</em></p></blockquote><p>For a full understanding of what is happening in the library, pleace check out the <a href="https://spring-easing.okikio.dev/modules" target="_blank" rel="noopener">API site<span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a> for detailed API documentation.</p><a id="md:browser-support" class="tsd-anchor"></a><h2 id="browser-support"><a href="#md:browser-support">Browser Support</a></h2><table><thead><tr><th>Chrome</th><th>Edge</th><th>Firefox</th><th>Safari</th><th>IE</th></tr></thead><tbody><tr><td>4+</td><td>12+</td><td>4+</td><td>4+</td><td>10+</td></tr></tbody></table><p>Native support for <code>spring-easing</code> is great as it doesn't use any browser specific or nodejs specific API's, you should be good to use <code>spring-easing</code> in any environment.</p><blockquote><p>Note: <code>CSSSpringEasing</code> is meant for browsers which have support for the <code>linear()</code> easing function, which as of right now is <code>Chrome & Edge 113</code> + <code>Firefox 112</code>, Safari doesn't support it yet.</p></blockquote><a id="md:contributing" class="tsd-anchor"></a><h2 id="contributing"><a href="#md:contributing">Contributing</a></h2><p>I encourage you to use <a href="https://pnpm.io/configuring" target="_blank" rel="noopener">pnpm<span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a> to contribute to this repo, but you can also use <a href="https://classic.yarnpkg.com/lang/en/" target="_blank" rel="noopener">yarn<span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a> or <a href="https://npmjs.com/" target="_blank" rel="noopener">npm<span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a> if you prefer.</p><p>Install all necessary packages</p><pre><code class="language-bash"><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-2">install</span></code><button>Copy</button></pre><p>Then run tests</p><pre><code class="language-bash"><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-2">test</span></code><button>Copy</button></pre><p>Build project</p><pre><code class="language-bash"><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-2">run</span><span class="hl-1"> </span><span class="hl-2">build</span></code><button>Copy</button></pre><p>Preview API Docs</p><pre><code class="language-bash"><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-2">run</span><span class="hl-1"> </span><span class="hl-2">typedoc</span><span class="hl-1"> && </span><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-2">run</span><span class="hl-1"> </span><span class="hl-2">preview</span></code><button>Copy</button></pre><blockquote><p><em><strong>Note</strong>: this project uses <a href="https://www.conventionalcommits.org/en/v1.0.0/" target="_blank" rel="noopener">Conventional Commits<span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a> standard for commits, so, please format your commits using the rules it sets out.</em></p></blockquote><a id="md:licence" class="tsd-anchor"></a><h2 id="licence"><a href="#md:licence">Licence</a></h2><p>See the <a href="https://github.com/okikio/spring-easing/tree/main/LICENSE" target="_blank" rel="noopener">LICENSE<span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a> file for license rights and limitations (MIT). </p><p>The <code>CSSSpringEasing</code>, <code>getOptimizedPoints</code> and <code>getLinearSyntax</code> function are based of the work done by <a href="https://github.com/jakearchibald/linear-easing-generator" target="_blank" rel="noopener">Jake Archibald<span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a> in his <a href="https://linear-easing-generator.netlify.app/" target="_blank" rel="noopener">Linear Easing Generator<span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a> and are thus licensed under the <a href="https://github.com/okikio/spring-easing/tree/main/LICENSE" target="_blank" rel="noopener">Apache License 2.0<span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a>.</p></div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-index-accordion"><summary class="tsd-accordion-summary"><h3 id="settings"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><h4 class="uppercase" id="member-visibility">Member Visibility</h4><form><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-private" name="private"><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Private</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></form></div><div class="tsd-theme-toggle"><h4 class="uppercase" id="theme">Theme</h4><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-index-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3 id="on-this-page"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg>On This Page</h3></summary><div class="tsd-accordion-details"><ul><li><ul><li><a href="#md:spring-easing"><span>spring-<wbr>easing</span></a></li><li><ul><li><a href="#md:installation"><span>Installation</span></a></li><li><ul><li><a href="#md:node"><span>Node</span></a></li><li><a href="#md:deno"><span>Deno</span></a></li></ul></li><li><a href="#md:usage"><span>Usage</span></a></li><li><ul><li><a href="#md:use-with-animation-libraries"><span>Use with <wbr>Animation <wbr>Libraries</span></a></li></ul></li><li><a href="#md:showcase"><span>Showcase</span></a></li><li><a href="#md:api"><span>API</span></a></li><li><ul><li><a href="#md:cssspringeasing"><span>CSSSpring<wbr>Easing</span></a></li><li><a href="#md:getoptimizedpoints"><span>get<wbr>Optimized<wbr>Points</span></a></li><li><a href="#md:getlinearsyntax"><span>get<wbr>Linear<wbr>Syntax</span></a></li></ul></li><li><a href="#md:browser-support"><span>Browser <wbr>Support</span></a></li><li><a href="#md:contributing"><span>Contributing</span></a></li><li><a href="#md:licence"><span>Licence</span></a></li></ul></li></ul></li></ul></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="modules.html" class="current"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-namespace)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-4-path"></rect><path d="M9.33 16V7.24H10.77L13.446 14.74C13.43 14.54 13.41 14.296 13.386 14.008C13.37 13.712 13.354 13.404 13.338 13.084C13.33 12.756 13.326 12.448 13.326 12.16V7.24H14.37V16H12.93L10.266 8.5C10.282 8.692 10.298 8.936 10.314 9.232C10.33 9.52 10.342 9.828 10.35 10.156C10.366 10.476 10.374 10.784 10.374 11.08V16H9.33Z" fill="var(--color-text)" id="icon-4-text"></path></svg><span>spring-<wbr>easing -<wbr> v2.3.0</span></a><ul class="tsd-small-nested-navigation"><li><a href="modules.html#default"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="#FF4D82" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="12" id="icon-8388608-path"></rect><path d="M10.354 17V8.24H13.066C13.586 8.24 14.042 8.348 14.434 8.564C14.826 8.772 15.13 9.064 15.346 9.44C15.562 9.816 15.67 10.256 15.67 10.76C15.67 11.352 15.514 11.86 15.202 12.284C14.898 12.708 14.482 13 13.954 13.16L15.79 17H14.518L12.838 13.28H11.434V17H10.354ZM11.434 12.308H13.066C13.514 12.308 13.874 12.168 14.146 11.888C14.418 11.6 14.554 11.224 14.554 10.76C14.554 10.288 14.418 9.912 14.146 9.632C13.874 9.352 13.514 9.212 13.066 9.212H11.434V12.308Z" fill="var(--color-text)" id="icon-8388608-text"></path></svg><span>default</span></a></li><li><a href="interfaces/IGenericBatchInterpolationFunction.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-interface)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-256-path"></rect><path d="M9.51 16V15.016H11.298V8.224H9.51V7.24H14.19V8.224H12.402V15.016H14.19V16H9.51Z" fill="var(--color-text)" id="icon-256-text"></path></svg><span>IGeneric<wbr>Batch<wbr>Interpolation<wbr>Function</span></a></li><li><a href="types/TypeArrayFrameFunctionFormat.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-type-alias)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-4194304-path"></rect><path d="M11.31 16V8.224H8.91V7.24H14.79V8.224H12.39V16H11.31Z" fill="var(--color-text)" id="icon-4194304-text"></path></svg><span>Type<wbr>Array<wbr>Frame<wbr>Function<wbr>Format</span></a></li><li><a href="types/TypeCSSEasingOptions.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-4194304-path"></use><use href="#icon-4194304-text"></use></svg><span>TypeCSSEasing<wbr>Options</span></a></li><li><a href="types/TypeEasingOptions.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-4194304-path"></use><use href="#icon-4194304-text"></use></svg><span>Type<wbr>Easing<wbr>Options</span></a></li><li><a href="types/TypeEasings.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-4194304-path"></use><use href="#icon-4194304-text"></use></svg><span>Type<wbr>Easings</span></a></li><li><a href="types/TypeFrameFunction.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-4194304-path"></use><use href="#icon-4194304-text"></use></svg><span>Type<wbr>Frame<wbr>Function</span></a></li><li><a href="types/TypeInterpolationFunction.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-4194304-path"></use><use href="#icon-4194304-text"></use></svg><span>Type<wbr>Interpolation<wbr>Function</span></a></li><li><a href="variables/EasingDurationCache.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-variable)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-32-path"></rect><path d="M11.106 16L8.85 7.24H9.966L11.454 13.192C11.558 13.608 11.646 13.996 11.718 14.356C11.79 14.708 11.842 14.976 11.874 15.16C11.906 14.976 11.954 14.708 12.018 14.356C12.09 13.996 12.178 13.608 12.282 13.192L13.758 7.24H14.85L12.582 16H11.106Z" fill="var(--color-text)" id="icon-32-text"></path></svg><span>Easing<wbr>Duration<wbr>Cache</span></a></li><li><a href="variables/EasingFunctionKeys.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-32-path"></use><use href="#icon-32-text"></use></svg><span>Easing<wbr>Function<wbr>Keys</span></a></li><li><a href="variables/EasingFunctions.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-32-path"></use><use href="#icon-32-text"></use></svg><span>Easing<wbr>Functions</span></a></li><li><a href="variables/FramePtsCache.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-32-path"></use><use href="#icon-32-text"></use></svg><span>Frame<wbr>Pts<wbr>Cache</span></a></li><li><a href="variables/INFINITE_LOOP_LIMIT.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-32-path"></use><use href="#icon-32-text"></use></svg><span>INFINITE_<wbr>LOOP_<wbr>LIMIT</span></a></li><li><a href="functions/BatchSpringEasing.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-function)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-64-path"></rect><path d="M9.39 16V7.24H14.55V8.224H10.446V11.128H14.238V12.112H10.47V16H9.39Z" fill="var(--color-text)" id="icon-64-text"></path></svg><span>Batch<wbr>Spring<wbr>Easing</span></a></li><li><a href="functions/CSSSpringEasing.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg><span>CSSSpring<wbr>Easing</span></a></li><li><a href="functions/EaseInOut.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg><span>Ease<wbr>In<wbr>Out</span></a></li><li><a href="functions/EaseOut.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg><span>Ease<wbr>Out</span></a></li><li><a href="functions/EaseOutIn.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg><span>Ease<wbr>Out<wbr>In</span></a></li><li><a href="functions/EasingOptions.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg><span>Easing<wbr>Options</span></a></li><li><a href="functions/GenerateSpringFrames.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg><span>Generate<wbr>Spring<wbr>Frames</span></a></li><li><a href="functions/SpringEasing.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg><span>Spring<wbr>Easing</span></a></li><li><a href="functions/SpringFrame.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg><span>Spring<wbr>Frame</span></a></li><li><a href="functions/SpringInFrame.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg><span>Spring<wbr>In<wbr>Frame</span></a></li><li><a href="functions/SpringInOutFrame.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg><span>Spring<wbr>In<wbr>Out<wbr>Frame</span></a></li><li><a href="functions/SpringOutFrame.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg><span>Spring<wbr>Out<wbr>Frame</span></a></li><li><a href="functions/SpringOutInFrame.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg><span>Spring<wbr>Out<wbr>In<wbr>Frame</span></a></li><li><a href="functions/batchInterpolateComplex.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg><span>batch<wbr>Interpolate<wbr>Complex</span></a></li><li><a href="functions/batchInterpolateNumber.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg><span>batch<wbr>Interpolate<wbr>Number</span></a></li><li><a href="functions/batchInterpolateSequence.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg><span>batch<wbr>Interpolate<wbr>Sequence</span></a></li><li><a href="functions/batchInterpolateString.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg><span>batch<wbr>Interpolate<wbr>String</span></a></li><li><a href="functions/batchInterpolateUsingIndex.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg><span>batch<wbr>Interpolate<wbr>Using<wbr>Index</span></a></li><li><a href="functions/getLinearSyntax.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg><span>get<wbr>Linear<wbr>Syntax</span></a></li><li><a href="functions/getOptimizedPoints.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg><span>get<wbr>Optimized<wbr>Points</span></a></li><li><a href="functions/getSpringDuration.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg><span>get<wbr>Spring<wbr>Duration</span></a></li><li><a href="functions/getUnit.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg><span>get<wbr>Unit</span></a></li><li><a href="functions/interpolateComplex.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg><span>interpolate<wbr>Complex</span></a></li><li><a href="functions/interpolateNumber.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg><span>interpolate<wbr>Number</span></a></li><li><a href="functions/interpolateSequence.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg><span>interpolate<wbr>Sequence</span></a></li><li><a href="functions/interpolateString.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg><span>interpolate<wbr>String</span></a></li><li><a href="functions/interpolateUsingIndex.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg><span>interpolate<wbr>Using<wbr>Index</span></a></li><li><a href="functions/isNumberLike.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg><span>is<wbr>Number<wbr>Like</span></a></li><li><a href="functions/limit.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg><span>limit</span></a></li><li><a href="functions/parseEasingParameters.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg><span>parse<wbr>Easing<wbr>Parameters</span></a></li><li><a href="functions/ramerDouglasPeucker.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg><span>ramer<wbr>Douglas<wbr>Peucker</span></a></li><li><a href="functions/registerEasingFunction.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg><span>register<wbr>Easing<wbr>Function</span></a></li><li><a href="functions/registerEasingFunctions.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg><span>register<wbr>Easing<wbr>Functions</span></a></li><li><a href="functions/scale.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg><span>scale</span></a></li><li><a href="functions/squaredSegmentDistance.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg><span>squared<wbr>Segment<wbr>Distance</span></a></li><li><a href="functions/toAnimationFrames.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg><span>to<wbr>Animation<wbr>Frames</span></a></li><li><a href="functions/toFixed.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg><span>to<wbr>Fixed</span></a></li></ul></nav></div></div></div><div class="tsd-generator"><p>Generated using <a href="https://typedoc.org/" target="_blank" rel="noopener">TypeDoc<span><span class="external-icon"><svg preserveAspectRatio="xMidYMid meet" width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M10.75 3a.75.75 0 0 0 0 1.5h7.67L3.22 19.7a.764.764 0 1 0 1.081 1.081l15.2-15.2v7.669a.75.75 0 0 0 1.5 0v-9.5a.75.75 0 0 0-.75-.75h-9.5Z"></path></svg></span></span></a></p></div><div class="overlay"></div></body></html>