CINXE.COM
mo.js
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>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/12.6085c0ff.js" as="script"><link rel="preload" href="/assets/js/3.9caef996.js" as="script"><link rel="preload" href="/assets/js/21.07c1ea1a.js" as="script"><link rel="preload" href="/assets/js/45.edd3a23b.js" as="script"><link rel="prefetch" href="/assets/js/1.802b0dea.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/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/4.47eaa7bc.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/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/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 no-sidebar"><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="/" aria-current="page" class="home-link router-link-exact-active 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="/" aria-current="page" class="nav-link router-link-exact-active router-link-active"> 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"> 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="/" aria-current="page" class="nav-link router-link-exact-active router-link-active"> 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"> 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/" class="sidebar-link">Tutorials overview</a></li><li><a href="/tutorials/getting-started.html" class="sidebar-link">Getting started</a></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> <div class="home"><div class="hero"><div class="mojs-interactive demo-mojs-logo-reveal__wrap"> <div class="mojs-interactive__result mojs-interactive__result--transparent" style="height: 600px"><div id="demo-mojs-logo-reveal" class="demo-mojs-logo-reveal"></div> <div id="demo-mojs-logo-reveal_controller" class="mojs-interactive__controller"></div></div></div> <p class="action"><a href="/tutorials/getting-started.html" class="nav-link action-button"> Get Started → </a></p></div> <div class="features"><div class="feature"><img src="/assets/img/features/feature-fast.png" alt="Fast" class="feature__image feature__image--fast"> <h2>Fast</h2> <p>Silky smooth animations and effects for staggering user's experience.</p></div><div class="feature"><img src="/assets/img/features/feature-retina.png" alt="Retina Ready" class="feature__image feature__image--retina"> <h2>Retina Ready</h2> <p>Screen density independent effects look good on any device.</p></div><div class="feature"><img src="/assets/img/features/feature-simple.png" alt="Simple" class="feature__image feature__image--simple"> <h2>Simple</h2> <p>Simple declarative APIs to master your motion project with ease.</p></div><div class="feature"><img src="/assets/img/features/feature-modular.png" alt="Modular" class="feature__image feature__image--modular"> <h2>Modular</h2> <p>Custom build for the current project's needs. Bye bye large file size overheads.</p></div><div class="feature"><img src="/assets/img/features/feature-robust.png" alt="Robust" class="feature__image feature__image--robust"> <h2>Robust</h2> <p>1580+ unit tests and ci techniques help us to carve & backstrap the reliable tool.</p></div><div class="feature"><img src="/assets/img/features/feature-open-sourced.png" alt="Open Sourced" class="feature__image feature__image--open-sourced"> <h2>Open Sourced</h2> <p>Great growing community refines mo· js fast and ships frequently.</p></div></div> <div custom="" class="content__default"></div> <div class="footer"> MIT Licensed | Copyright © 2016-present @legomushroom </div></div></div><div class="global-ui"></div></div> <script src="/assets/js/app.9511ae28.js" defer></script><script src="/assets/js/12.6085c0ff.js" defer></script><script src="/assets/js/3.9caef996.js" defer></script><script src="/assets/js/21.07c1ea1a.js" defer></script><script src="/assets/js/45.edd3a23b.js" defer></script> </body> </html>