CINXE.COM

<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Mojs Curve Editor | mo.js</title> <meta name="generator" content="VuePress 1.9.10"> <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicons/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicons/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicons/favicon-16x16.png"> <link rel="manifest" href="/assets/favicons/site.webmanifest"> <link rel="mask-icon" href="/assets/favicons/safari-pinned-tab.svg" color="#3a0839"> <link rel="shortcut icon" href="/assets/favicons/favicon.ico"> <meta name="description" content="The official website for mojs"> <meta name="msapplication-TileColor" content="#3a0839"> <meta name="msapplication-config" content="/assets/favicons/browserconfig.xml"> <meta name="theme-color" content="#ffffff"> <link rel="preload" href="/assets/css/0.styles.664372c2.css" as="style"><link rel="preload" href="/assets/js/app.9511ae28.js" as="script"><link rel="preload" href="/assets/js/4.47eaa7bc.js" as="script"><link rel="preload" href="/assets/js/3.9caef996.js" as="script"><link rel="preload" href="/assets/js/63.ea03df9f.js" as="script"><link rel="preload" href="/assets/js/23.df96f4a4.js" as="script"><link rel="prefetch" href="/assets/js/1.802b0dea.js"><link rel="prefetch" href="/assets/js/12.6085c0ff.js"><link rel="prefetch" href="/assets/js/13.58d1b12e.js"><link rel="prefetch" href="/assets/js/14.011f4638.js"><link rel="prefetch" href="/assets/js/15.ff764163.js"><link rel="prefetch" href="/assets/js/16.327ae4ea.js"><link rel="prefetch" href="/assets/js/17.a1672e05.js"><link rel="prefetch" href="/assets/js/18.0efa973c.js"><link rel="prefetch" href="/assets/js/19.023238fa.js"><link rel="prefetch" href="/assets/js/2.64b8d96f.js"><link rel="prefetch" href="/assets/js/20.d29d73cc.js"><link rel="prefetch" href="/assets/js/21.07c1ea1a.js"><link rel="prefetch" href="/assets/js/22.49e6dbe1.js"><link rel="prefetch" href="/assets/js/24.388efe1c.js"><link rel="prefetch" href="/assets/js/25.07c26136.js"><link rel="prefetch" href="/assets/js/26.42f4244d.js"><link rel="prefetch" href="/assets/js/27.85638e06.js"><link rel="prefetch" href="/assets/js/28.f8c71aa2.js"><link rel="prefetch" href="/assets/js/29.86905a8c.js"><link rel="prefetch" href="/assets/js/30.b7a4cd53.js"><link rel="prefetch" href="/assets/js/31.8b64c779.js"><link rel="prefetch" href="/assets/js/32.205dd310.js"><link rel="prefetch" href="/assets/js/33.309ee930.js"><link rel="prefetch" href="/assets/js/34.2792bbab.js"><link rel="prefetch" href="/assets/js/35.069cfd14.js"><link rel="prefetch" href="/assets/js/36.039847a1.js"><link rel="prefetch" href="/assets/js/37.89221f5e.js"><link rel="prefetch" href="/assets/js/38.c6cb2a66.js"><link rel="prefetch" href="/assets/js/39.bdda383c.js"><link rel="prefetch" href="/assets/js/40.1000aacf.js"><link rel="prefetch" href="/assets/js/41.0ac526df.js"><link rel="prefetch" href="/assets/js/42.3e2d6a41.js"><link rel="prefetch" href="/assets/js/43.8bf09c0e.js"><link rel="prefetch" href="/assets/js/44.a5b69f5c.js"><link rel="prefetch" href="/assets/js/45.edd3a23b.js"><link rel="prefetch" href="/assets/js/46.f0a855cd.js"><link rel="prefetch" href="/assets/js/47.0908c1e3.js"><link rel="prefetch" href="/assets/js/48.db04694d.js"><link rel="prefetch" href="/assets/js/49.c121ea5b.js"><link rel="prefetch" href="/assets/js/5.50a866a7.js"><link rel="prefetch" href="/assets/js/50.b6d1a417.js"><link rel="prefetch" href="/assets/js/51.b4301778.js"><link rel="prefetch" href="/assets/js/52.f44b8a35.js"><link rel="prefetch" href="/assets/js/53.c0059383.js"><link rel="prefetch" href="/assets/js/54.bb941569.js"><link rel="prefetch" href="/assets/js/55.55364e64.js"><link rel="prefetch" href="/assets/js/56.7a94e9bd.js"><link rel="prefetch" href="/assets/js/57.a03da508.js"><link rel="prefetch" href="/assets/js/58.bb4604d0.js"><link rel="prefetch" href="/assets/js/59.b16e03e9.js"><link rel="prefetch" href="/assets/js/6.b54c7728.js"><link rel="prefetch" href="/assets/js/60.85609e7a.js"><link rel="prefetch" href="/assets/js/61.42f2e14c.js"><link rel="prefetch" href="/assets/js/62.284d3cac.js"><link rel="prefetch" href="/assets/js/64.dc69cff4.js"><link rel="prefetch" href="/assets/js/65.b4b0c63b.js"><link rel="prefetch" href="/assets/js/66.38efd21d.js"><link rel="prefetch" href="/assets/js/67.375a5dcf.js"><link rel="prefetch" href="/assets/js/68.1f312304.js"><link rel="prefetch" href="/assets/js/69.280cf201.js"><link rel="prefetch" href="/assets/js/7.f9036875.js"><link rel="prefetch" href="/assets/js/70.a67a7642.js"><link rel="prefetch" href="/assets/js/71.8bd8d003.js"><link rel="prefetch" href="/assets/js/72.784cd386.js"><link rel="prefetch" href="/assets/js/8.a1de01cd.js"><link rel="prefetch" href="/assets/js/9.5a5477bb.js"><link rel="prefetch" href="/assets/js/vendors~docsearch.b7d5e58e.js"> <link rel="stylesheet" href="/assets/css/0.styles.664372c2.css"> </head> <body> <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/assets/img/logo.svg" alt="mo.js" class="logo"> <span class="site-name can-hide">mo.js</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> </div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link"> Home </a></div><div class="nav-item"><a href="/tutorials/" class="nav-link"> Tutorials </a></div><div class="nav-item"><a href="/api/" class="nav-link"> Api </a></div><div class="nav-item"><a href="/tools/" class="nav-link router-link-active"> Tools </a></div><div class="nav-item"><a href="https://github.com/mojs" target="_blank" rel="noopener noreferrer" class="nav-link external"> Github <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> </nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link"> Home </a></div><div class="nav-item"><a href="/tutorials/" class="nav-link"> Tutorials </a></div><div class="nav-item"><a href="/api/" class="nav-link"> Api </a></div><div class="nav-item"><a href="/tools/" class="nav-link router-link-active"> Tools </a></div><div class="nav-item"><a href="https://github.com/mojs" target="_blank" rel="noopener noreferrer" class="nav-link external"> Github <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> </nav> <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Tutorials</span> <span class="arrow right"></span></p> </section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Tools</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/tools/" aria-current="page" class="sidebar-link">Tools overview</a></li><li><a href="/tools/player/" class="sidebar-link">Mojs Player</a></li><li><a href="/tools/curve-editor/" aria-current="page" class="active sidebar-link">Mojs Curve Editor</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/tools/curve-editor/#tldr" class="sidebar-link">TLDR;</a></li><li class="sidebar-sub-header"><a href="/tools/curve-editor/#installation" class="sidebar-link">Installation</a></li><li class="sidebar-sub-header"><a href="/tools/curve-editor/#usage" class="sidebar-link">Usage</a></li><li class="sidebar-sub-header"><a href="/tools/curve-editor/#options" class="sidebar-link">Options</a></li><li class="sidebar-sub-header"><a href="/tools/curve-editor/#public-methods" class="sidebar-link">Public Methods</a></li><li class="sidebar-sub-header"><a href="/tools/curve-editor/#shortcuts" class="sidebar-link">Shortcuts</a></li></ul></li><li><a href="/tools/timeline-editor/" class="sidebar-link">Timeline Editor</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>API</span> <span class="arrow right"></span></p> </section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="mojs-curve-editor"><a href="#mojs-curve-editor" class="header-anchor">#</a> <a href="https://github.com/mojs/mojs-curve-editor" target="_blank" rel="noopener noreferrer">Mojs Curve Editor<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></h1> <p><a href="https://www.npmjs.com/package/@mojs/curve-editor" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/npm/v/@mojs/curve-editor.svg" alt="npm"><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <blockquote><p><code>MojsCurveEditor</code> is a GUI plugin for interactive <strong>custom easings / property curves</strong> editing while crafting your animations. Part of mojs tools.</p></blockquote> <p><a href="https://codepen.io/sandstedt/pen/MWJNewP?editors=1010" target="_blank" rel="noopener noreferrer">CodePen Example<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="tldr"><a href="#tldr" class="header-anchor">#</a> TLDR;</h2> <ul><li>Install it: <code>npm i @mojs/curve-editor</code></li> <li>Import it: <code>import MojsCurveEditor from '@mojs/curve-editor';</code>'</li> <li>Use it:</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> mojsCurve <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">MojsCurveEditor</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> tween <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">mojs<span class="token punctuation">.</span>Tween</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">easing</span><span class="token operator">:</span> mojsCurve<span class="token punctuation">.</span><span class="token function">getEasing</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div><p><img src="https://raw.githubusercontent.com/mojs/mojs-curve-editor/master/logo.png" alt="mojs-curve-editor"></p> <div class="mojs-interactive demo-mojs-logo-reveal__wrap"> <button class="button">Open demo</button>  <div id="curve-editor-example" class="curve-example curve-example--closed mojs-interactive__result mojs-interactive__result--dark"><div id="curve-controller" class="mojs-interactive__controller"></div></div></div> <h2 id="installation"><a href="#installation" class="header-anchor">#</a> Installation</h2> <p>The <code>MojsCurveEditor</code> depends on <code>mojs >= 0.225.2</code>, tween autoupdates available for <code>mojs >= 0.276.2</code>. Please make sure you've imported <a href="https://github.com/mojs/mojs" target="_blank" rel="noopener noreferrer">mojs<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> library first.</p> <h3 id="cdn"><a href="#cdn" class="header-anchor">#</a> cdn</h3> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@mojs/curve-editor<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> </code></pre></div><h3 id="npm"><a href="#npm" class="header-anchor">#</a> npm</h3> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">npm</span> i @mojs/curve-editor </code></pre></div><p>Import <code>MojsCurveEditor</code> into your code:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> MojsCurveEditor <span class="token keyword">from</span> <span class="token string">'@mojs/curve-editor'</span><span class="token punctuation">;</span> </code></pre></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>If you installed it with the CDN option - you should have <code>MojsCurveEditor</code> globally.</p></div> <h2 id="usage"><a href="#usage" class="header-anchor">#</a> Usage</h2> <p>Construct <code>MojsCurveEditor</code> and provide a name of the curve you're working on:</p> <div class="language-js extra-class"><div class="highlight-lines"><br><div class="highlighted"> </div><br><br></div><pre class="language-js"><code> <span class="token keyword">const</span> mojsCurve <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">MojsCurveEditor</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'bounce curve'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>The name is used to identify record in <code>localStorage</code> to restore the state from when page gets reloaded, so please specify unique names if you use more than one editor on the same page.</p></div> <p>After that you can "connect" the curve with your <code>mojs</code> modules by passing a "sample" of the curve to the <code>easing</code> property of the module, like this:</p> <div class="language-js extra-class"><pre class="language-js"><code> <span class="token keyword">const</span> myCurve <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">MojsCurveEditor</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'myCurve'</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> tween <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">mojs<span class="token punctuation">.</span>Tween</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">easing</span><span class="token operator">:</span> myCurve<span class="token punctuation">.</span><span class="token function">getEasing</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// or</span> <span class="token keyword">const</span> shape <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">mojs<span class="token punctuation">.</span>Shape</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">easing</span><span class="token operator">:</span> myCurve<span class="token punctuation">.</span><span class="token function">getEasing</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// or as `property curve`</span> <span class="token keyword">const</span> html <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">mojs<span class="token punctuation">.</span>Html</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'#js-el'</span><span class="token punctuation">,</span> <span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token number">0</span><span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span> <span class="token literal-property property">curve</span><span class="token operator">:</span> myCurve<span class="token punctuation">.</span><span class="token function">getEasing</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div><p>Each <code>tween</code>/<code>module</code> should have it's out sample of the curve, this means you need to call <code>myCurve.getEasing()</code> send the <code>sample</code> of the curve to the <code>easing</code> property of modules.</p> <p>If you use <code>mojs>0.276.5</code> the state of the modules with the curve <code>sample</code> will be updated automatically.</p> <p>The <code>getEasing</code> function receives options hash:</p> <div class="language-js extra-class"><pre class="language-js"><code> <span class="token literal-property property">easing</span><span class="token operator">:</span> myCurve<span class="token punctuation">.</span><span class="token function">getEasing</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token comment">// `transform` function that pipes through the current value</span> <span class="token comment">// of the curve so you can transform it</span> <span class="token function-variable function">transform</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">k</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">return</span> k<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div><p>After you are happy with the curve you made, you need to change the <strong>sample</strong> (the <code>myCurve.getEasing()</code> call) with the actual path data which you can get by clicking on the <code>code</code> button ( <svg width="32" viewBox="0 0 32 32" style="position:relative;top:0.4em;width:24px;height:24px;display:inline-block;background:#fff;border-radius:3px;box-shadow:1px 1px 0 rgba(0,0,0,.15);"><use xlink:href="#maximize-shape"></use></svg> ):</p> <div class="language-js extra-class"><pre class="language-js"><code> <span class="token keyword">const</span> html <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">mojs<span class="token punctuation">.</span>Html</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'#js-el'</span><span class="token punctuation">,</span> <span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token number">0</span><span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span> <span class="token literal-property property">easing</span><span class="token operator">:</span> <span class="token string">'M0, 100 C0, 100 19.8984745544779, 40.10152544552211 30, 30 C40.1015254455221, 19.89847455447789 80, 45 80, 45 C80, 45 100, 0 100, 0 '</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div><h2 id="options"><a href="#options" class="header-anchor">#</a> Options</h2> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> curveEditor <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">MojsCurveEditor</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token comment">// name of the curve editor</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'bounce curve'</span><span class="token punctuation">,</span> <span class="token comment">// if should preserve state on page reloads</span> <span class="token literal-property property">isSaveState</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// start path - will be loaded on initialization of the curve,</span> <span class="token comment">// e.g. before any user modifications were made. Path of 'M0, 100 L100, 0' is set by default.</span> <span class="token literal-property property">startPath</span><span class="token operator">:</span> <span class="token string">'M0, 100 L100, 0'</span><span class="token punctuation">,</span> <span class="token comment">// callback on path change, accepts path string</span> <span class="token function-variable function">onChange</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">path</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// if should hide when minimized - useful when you try to embed</span> <span class="token literal-property property">isHiddenOnMin</span><span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div><h2 id="public-methods"><a href="#public-methods" class="header-anchor">#</a> Public Methods</h2> <div class="language-js extra-class"><pre class="language-js"><code>curveEditor <span class="token comment">// get `easing function` of the curve</span> <span class="token punctuation">.</span><span class="token function">getEasing</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// maximize the curve editor</span> <span class="token punctuation">.</span><span class="token function">maximize</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// minimize the curve editor</span> <span class="token punctuation">.</span><span class="token function">minimize</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// toggle `maximize/minimize` methods regarding editor's state</span> <span class="token punctuation">.</span><span class="token function">toggleSize</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div><h2 id="shortcuts"><a href="#shortcuts" class="header-anchor">#</a> Shortcuts</h2> <ul><li><code>alt + z</code> - <strong>undo</strong> curve action</li> <li><code>alt + x</code> - <strong>redo</strong> curve action</li> <li><code>alt + d</code> - <strong>delete</strong> selected point(s)</li> <li>[3 times] <code>alt + \</code> - <strong>reset</strong> curve</li></ul> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>The shortcuts works only in the active editor - it should have <strong>orange mojs logo indicator</strong> at the bottom left.</p></div></div> <footer class="page-edit"> </footer> <div class="page-nav"><p class="inner"><span class="prev"> ← <a href="/tools/player/" class="prev"> Mojs Player </a></span> <span class="next"><a href="/tools/timeline-editor/"> Timeline Editor </a> → </span></p></div> </main></div><div class="global-ui"></div></div> <script src="/assets/js/app.9511ae28.js" defer></script><script src="/assets/js/4.47eaa7bc.js" defer></script><script src="/assets/js/3.9caef996.js" defer></script><script src="/assets/js/63.ea03df9f.js" defer></script><script src="/assets/js/23.df96f4a4.js" defer></script> </body> </html>