CINXE.COM

<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Getting started | 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/70.a67a7642.js" as="script"><link rel="preload" href="/assets/js/16.327ae4ea.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/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/23.df96f4a4.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/63.ea03df9f.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/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 router-link-active"> 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"> 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 router-link-active"> 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"> 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 open"><span>Tutorials</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/tutorials/" aria-current="page" class="sidebar-link">Tutorials overview</a></li><li><a href="/tutorials/getting-started.html" aria-current="page" class="active sidebar-link">Getting started</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/tutorials/getting-started.html#setup-mo-js-in-your-project" class="sidebar-link">Setup mo.js in your project</a></li><li class="sidebar-sub-header"><a href="/tutorials/getting-started.html#usage-with-server-side-rendering-ssr" class="sidebar-link">Usage with Server Side Rendering (SSR)</a></li></ul></li><li><a href="/tutorials/shape-swirl/" class="sidebar-link">Shape & ShapeSwirl</a></li><li><a href="/tutorials/burst/" class="sidebar-link">Burst</a></li><li><a href="/tutorials/usage-with-react.html" class="sidebar-link">Usage with React</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Tools</span> <span class="arrow right"></span></p> </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="getting-started"><a href="#getting-started" class="header-anchor">#</a> Getting started</h1> <h2 id="setup-mo-js-in-your-project"><a href="#setup-mo-js-in-your-project" class="header-anchor">#</a> Setup mo.js in your project</h2> <ul><li><p>Run <code>npm i @mojs/core</code> OR <code>yarn add @mojs/core</code></p></li> <li><p>Import it <code>import mojs from '@mojs/core'</code></p> <p>Or use the minified CDN version:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator"><</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.jsdelivr.net/npm/@mojs/core"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> </code></pre></div></li> <li><p>Create your animations. What about a bouncy circle?</p></li></ul> <div class="mojs-interactive"><div class="mojs-interactive__code"><div class="prism-editor-wrapper"><pre contenteditable="true" spellCheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" class="prism-editor__code language-js"><code class="language-js"><span class="token keyword">const</span> bouncyCircle <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">parent</span><span class="token operator">:</span> <span class="token string">'#bouncyCircle'</span><span class="token punctuation">,</span> <span class="token literal-property property">shape</span><span class="token operator">:</span> <span class="token string">'circle'</span><span class="token punctuation">,</span> <span class="token literal-property property">fill</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token string-property property">'#F64040'</span><span class="token operator">:</span> <span class="token string">'#FC46AD'</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">radius</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token number">20</span><span class="token operator">:</span> <span class="token number">80</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">duration</span><span class="token operator">:</span> <span class="token number">2000</span><span class="token punctuation">,</span> <span class="token literal-property property">isYoyo</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token literal-property property">isShowStart</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token literal-property property">easing</span><span class="token operator">:</span> <span class="token string">'elastic.inout'</span><span class="token punctuation">,</span> <span class="token literal-property property">repeat</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> bouncyCircle<span class="token punctuation">.</span><span class="token function">play</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code></pre></div> <div class="buttons"><button class="button button--secondary"> Reset </button> <button class="button">Update code</button></div></div>  <div id="bouncyCircle" class="mojs-interactive__result " style="height:300px;"><div id="bouncyCircle_controller" class="mojs-interactive__controller"></div></div></div> <hr> <p>Or maybe a loading animation?</p> <div class="mojs-interactive"><div class="mojs-interactive__code"><div class="prism-editor-wrapper"><pre contenteditable="true" spellCheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" class="prism-editor__code language-js"><code class="language-js"><span class="token keyword">const</span> spinner <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">parent</span><span class="token operator">:</span> <span class="token string">'#spinner'</span><span class="token punctuation">,</span> <span class="token literal-property property">shape</span><span class="token operator">:</span> <span class="token string">'circle'</span><span class="token punctuation">,</span> <span class="token literal-property property">stroke</span><span class="token operator">:</span> <span class="token string">'#FC46AD'</span><span class="token punctuation">,</span> <span class="token literal-property property">strokeDasharray</span><span class="token operator">:</span> <span class="token string">'125, 125'</span><span class="token punctuation">,</span> <span class="token literal-property property">strokeDashoffset</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token string-property property">'0'</span><span class="token operator">:</span> <span class="token string">'-125'</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">strokeWidth</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token literal-property property">fill</span><span class="token operator">:</span> <span class="token string">'none'</span><span class="token punctuation">,</span> <span class="token literal-property property">left</span><span class="token operator">:</span> <span class="token string">'50%'</span><span class="token punctuation">,</span> <span class="token literal-property property">top</span><span class="token operator">:</span> <span class="token string">'50%'</span><span class="token punctuation">,</span> <span class="token literal-property property">rotate</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token string-property property">'-90'</span><span class="token operator">:</span> <span class="token string">'270'</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">radius</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token literal-property property">isShowStart</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token literal-property property">duration</span><span class="token operator">:</span> <span class="token number">2000</span><span class="token punctuation">,</span> <span class="token literal-property property">easing</span><span class="token operator">:</span> <span class="token string">'back.in'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">rotate</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token string-property property">'-90'</span><span class="token operator">:</span> <span class="token string">'270'</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">strokeDashoffset</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token string-property property">'-125'</span><span class="token operator">:</span> <span class="token string">'-250'</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">duration</span><span class="token operator">:</span> <span class="token number">3000</span><span class="token punctuation">,</span> <span class="token literal-property property">easing</span><span class="token operator">:</span> <span class="token string">'cubic.out'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> spinner<span class="token punctuation">.</span><span class="token function">play</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <div class="buttons"><button class="button button--secondary"> Reset </button> <button class="button">Update code</button></div></div>  <div id="spinner" class="mojs-interactive__result " style="height:200px;"><div id="spinner_controller" class="mojs-interactive__controller"></div></div></div> <p>Go creative!</p> <p>See the <a href="/api/">API</a> for more info.</p> <h2 id="usage-with-server-side-rendering-ssr"><a href="#usage-with-server-side-rendering-ssr" class="header-anchor">#</a> Usage with Server Side Rendering (SSR)</h2> <p>Note that this is a client-side library, and is not meant to be run on a server. So if you are using a library like Next.js, Gatsby, Nuxt.js or Angular Universal, make sure not to run your MoJS code on the server, just on the client side. How to do that differs from the library you are using. In React based libraries you can use the <code>useEffect</code> hook or a dynamic import (<a href="https://dev.to/vvo/how-to-solve-window-is-not-defined-errors-in-react-and-next-js-5f97" target="_blank" rel="noopener noreferrer">read more here<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>). For Angular Universal you can use Guards (<a href="https://github.com/angular/universal/blob/master/docs/gotchas.md#window-is-not-defined" target="_blank" rel="noopener noreferrer">read more about it here<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>). Lastly if you use Vue with Nuxt.js, you will find <a href="https://nuxtjs.org/faq/window-document-undefined" target="_blank" rel="noopener noreferrer">more info here<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>, or info about using the <code>mounted</code> hook <a href="https://nuxtjs.org/guides/concepts/server-side-rendering" target="_blank" rel="noopener noreferrer">here<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> <p>Also see tutorial on how to use MoJS inside a <a href="/tutorials/usage-with-react.html">React app here</a>.</p></div> <footer class="page-edit"> </footer> <div class="page-nav"><p class="inner"><span class="prev"> ← <a href="/tutorials/" class="prev router-link-active"> Tutorials overview </a></span> <span class="next"><a href="/tutorials/shape-swirl/"> Shape & ShapeSwirl </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/70.a67a7642.js" defer></script><script src="/assets/js/16.327ae4ea.js" defer></script> </body> </html>