1<!doctype html> 2<head> 3<meta charset="UTF-8"> 4<meta name="generator" content="Docusaurus v2.3.1"> 5<title data-rh="true">Introduction | Motion Canvas</title> 6<meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"> 7<meta data-rh="true" name="twitter:card" content="summary_large_image"> 8<meta data-rh="true" property="og:image" content="/img/banner.png"> 9<meta data-rh="true" name="twitter:image" content="/img/banner.png"> 10<meta data-rh="true" property="og:url" content="/docs/"> 11<meta data-rh="true" name="docusaurus_locale" content="en"> 12<meta data-rh="true" name="docsearch:language" content="en"> 13<meta data-rh="true" name="keywords" content="typescript, animation, library"> 14<meta data-rh="true" name="docusaurus_version" content="current"> 15<meta data-rh="true" name="docusaurus_tag" content="docs-default-current"> 16<meta data-rh="true" name="docsearch:version" content="current"> 17<meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"> 18<meta data-rh="true" property="og:title" content="Introduction | Motion Canvas"> 19<meta data-rh="true" name="description" content="Motion Canvas consists of two main components:"> 20<meta data-rh="true" property="og:description" content="Motion Canvas consists of two main components:"> 21<link data-rh="true" rel="icon" href="/img/favicon.svg"> 22<link data-rh="true" rel="canonical" href="/docs/"> 23<link data-rh="true" rel="alternate" href="/docs/" hreflang="en"> 24<link data-rh="true" rel="alternate" href="/docs/" hreflang="x-default"> 25<link data-rh="true" rel="preconnect" href="https://q6z7bj83rf-dsn.algolia.net/" crossorigin="anonymous"> 26<link rel="alternate" type="application/rss+xml" href="/blog/rss.xml" title="Motion Canvas RSS Feed"> 27<link rel="alternate" type="application/atom+xml" href="/blog/atom.xml" title="Motion Canvas Atom Feed"> 28<link rel="search" type="application/opensearchdescription+xml" title="Motion Canvas" href="/opensearch.xml"> 29<link rel="stylesheet" href="/assets/css/styles.bf18f5e5.css"> 30<link rel="preload" href="/assets/js/runtime~main.d9a5732d.js" as="script"> 31<link rel="preload" href="/assets/js/main.6aa94b2f.js" as="script"> 32</head><body class="navigation-with-keyboard"> 33
33<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"dark")}()</script>
33 34 35<div id="__docusaurus"> 36 <div role="region" aria-label="Skip to main content"> 37 <a class="skipToContent_G6ar" href="#docusaurus_skipToContent_fallback">Skip to main content</a> 38 </div> 39 <nav aria-label="Main" class="navbar navbar--fixed-top"> 40 <div class="navbar__inner"> 41 <div class="navbar__items"> 42 43 <a class="navbar__brand" href="/"> 44 <div class="navbar__logo"> 45 <img src="/img/logo.svg" alt="Motion Canvas Logo" class="themedImage_RWGG themedImage--light_riBm"> 46 <img src="/img/logo_dark.svg" alt="Motion Canvas Logo" class="themedImage_RWGG themedImage--dark_Dsi0"> 47 </div> 48 <b class="navbar__title text--truncate">Motion Canvas</b> 49 </a> 50 <a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs/">Docs</a> 51 <a class="navbar__item navbar__link" href="/api/core">API</a> 52 <a class="navbar__item navbar__link" href="/blog">Blog</a> 53 </div> 54 <div class="navbar__items navbar__items--right"> 55 56 <div class="toggle_OLSw colorModeToggle_x44X"> 57 58 </div> 59 <div class="root_TZLv loading_lRyv"> 60 <div class="badge_yk5a"> 61 <small> 62 <strong></strong> 63 stars 64 </small> 65 </div> 66 67 </div> 68 <div class="root_TZLv loading_lRyv"> 69 <div class="badge_yk5a"> 70 <small> 71 <strong></strong> 72 online 73 </small> 74 </div> 75 76 </div> 77 </div> 78 </div> 79 <div role="presentation" class="navbar-sidebar__backdrop"></div> 80 </nav> 81 <div id="docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_UyTV docsWrapper_BqXd"> 82 83 <div class="docPage_pOTq"> 84 <aside class="theme-doc-sidebar-container docSidebarContainer_aIKW"> 85 <div class="sidebarViewport_DwR9"> 86 <div class="sidebar_vJCc"> 87 <nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_qiME"> 88 <ul class="theme-doc-sidebar-menu menu__list"> 89 <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"> 90 <a class="menu__link menu__link--active" aria-current="page" href="/docs/">Introduction</a> 91 </li> 92 <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"> 93 <div class="menu__list-item-collapsible"> 94 <a class="menu__link menu__link--sublist" aria-expanded="true" href="/docs/category/getting-started">Getting Started</a> 95 96 </div> 97 <ul style="display:block;overflow:visible;height:auto" class="menu__list"> 98 <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"> 99 <a class="menu__link" tabindex="0" href="/docs/quickstart">Quickstart</a> 100 </li> 101 <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"> 102 <a class="menu__link" tabindex="0" href="/docs/flow">Animation flow</a> 103 </li> 104 <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"> 105 <a class="menu__link" tabindex="0" href="/docs/hierarchy">Scene hierarchy</a> 106 </li> 107 <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"> 108 <a class="menu__link" tabindex="0" href="/docs/positioning">Positioning</a> 109 </li> 110 <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"> 111 <a class="menu__link" tabindex="0" href="/docs/layouts">Layouts</a> 112 </li> 113 <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"> 114 <a class="menu__link" tabindex="0" href="/docs/signals">Signals</a> 115 </li> 116 <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"> 117 <a class="menu__link" tabindex="0" href="/docs/references">References</a> 118 </li> 119 <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"> 120 <a class="menu__link" tabindex="0" href="/docs/tweening">Tweening</a> 121 </li> 122 <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"> 123 <a class="menu__link" tabindex="0" href="/docs/time-events">Time Events</a> 124 </li> 125 <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"> 126 <a class="menu__link" tabindex="0" href="/docs/transitions">Transitions</a> 127 </li> 128 <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"> 129 <a class="menu__link" tabindex="0" href="/docs/logging">Logging</a> 130 </li> 131 <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"> 132 <a class="menu__link" tabindex="0" href="/docs/media">Media</a> 133 </li> 134 <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"> 135 <a class="menu__link" tabindex="0" href="/docs/rendering">Rendering</a> 136 </li> 137 <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"> 138 <a class="menu__link" tabindex="0" href="/docs/presentation">Presentation</a> 139 </li> 140 <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"> 141 <a class="menu__link" tabindex="0" href="/docs/configuration">Configuration</a> 142 </li> 143 </ul> 144 </li> 145 <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"> 146 <div class="menu__list-item-collapsible"> 147 <a class="menu__link menu__link--sublist" aria-expanded="false" href="/docs/category/components">Components</a> 148 149 </div> 150 </li> 151 <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"> 152 <div class="menu__list-item-collapsible"> 153 <a class="menu__link menu__link--sublist" aria-expanded="false" href="/docs/category/advanced">Advanced</a> 154 155 </div> 156 </li> 157 <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"> 158 <div class="menu__list-item-collapsible"> 159 <a class="menu__link menu__link--sublist" aria-expanded="false" href="/docs/category/migration">Migration</a> 160 161 </div> 162 </li> 163 </ul> 164 </nav> 165 </div> 166 </div> 167 </aside> 168 <main class="docMainContainer_fv3b"> 169 <div class="container padding-top--md padding-bottom--lg"> 170 <div> 171 <div class="row"> 172 <div class="col docItemCol_YAwJ"> 173 <div class="docItemContainer_Rv5Z"> 174 <article> 175 <nav class="theme-doc-breadcrumbs breadcrumbsContainer_zCmv" aria-label="Breadcrumbs"> 176 <ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList"> 177 <li class="breadcrumbs__item"> 178 <a aria-label="Home page" class="breadcrumbs__link" href="/"> 179 <svg viewbox="0 0 24 24" style="width:16px;height:16px;margin-top:0.1rem" class="breadcrumbHomeIcon_JFrk"> 180 <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" fill="currentColor"></path> 181 </svg> 182 </a> 183 </li> 184 <li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item breadcrumbs__item--active">
185 <span class="breadcrumbs__link" itemprop="name">Introduction</span> 186 <meta itemprop="position" content="1"> 187 </li> 188 </ul> 189 </nav> 190 <div class="theme-doc-markdown markdown"> 191 <h1>Introduction</h1> 192 <p>Motion Canvas consists of two main components:</p> 193 <ul> 194 <li>A TypeScript library that uses generators to program animations.</li> 195 <li>An editor providing a real-time preview of said animations.</li> 196 </ul> 197 <p>It's a specialized tool designed to create informative vector animations andsynchronize them with voice-overs. It's not meant to be a replacement fortraditional video editing software.</p> 198 <p> 199 Aside from providing the preview, the editor allows you to edit certain aspectsof the animation which could otherwise be tedious. You can learn more about thisfunctionality in the 200 <a href="/docs/time-events">time events</a> 201 section. 202 </p> 203 <p> 204 Motion Canvas is a free and open source project. You can help making it betterby reporting bugs, proposing new features, or contributing to the codebase. Ifyou're interested, our 205 206 will help you getstarted. 207 </p> 208 </div> 209 <footer class="theme-doc-footer docusaurus-mt-lg"> 210 <div class="theme-doc-footer-edit-meta-row row"> 211 <div class="col"> 212 213 </div> 214 <div class="col lastUpdated_T23F"> 215 <span class="theme-last-updated"> 216 Last updated by 217 <b>Jacob</b> 218 </span> 219 </div> 220 </div> 221 </footer> 222 </article> 223 <nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages navigation"> 224 <a class="pagination-nav__link pagination-nav__link--next" href="/docs/category/getting-started"> 225 <div class="pagination-nav__sublabel">Next</div> 226 <div class="pagination-nav__label">Getting Started</div> 227 </a> 228 </nav> 229 </div> 230 </div> 231 </div> 232 <div class="tooltip_lI6R padding--md margin-horiz--md"></div> 233 </div> 234 </div> 235 </main> 236 </div> 237 </div> 238 <footer class="footer"> 239 <div class="container container-fluid"> 240 <div class="row footer__links"> 241 <div class="col footer__col"> 242 <div class="footer__title">Docs</div> 243 <ul class="footer__items clean-list"> 244 <li class="footer__item"> 245 <a class="footer__link-item" href="/docs">Docs</a> 246 </li> 247 <li class="footer__item"> 248 <a class="footer__link-item" href="/api/core">API</a> 249 </li> 250 </ul> 251 </div> 252 <div class="col footer__col"> 253 <div class="footer__title">Community</div> 254 <ul class="footer__items clean-list"> 255 <li class="footer__item"> 256 257 </li> 258 <li class="footer__item"> 259 260 </li> 261 <li class="footer__item"> 262 263 </li> 264 </ul> 265 </div> 266 <div class="col footer__col"> 267 <div class="footer__title">More</div> 268 <ul class="footer__items clean-list"> 269 <li class="footer__item"> 270 <a class="footer__link-item" href="/blog">Blog</a> 271 </li> 272 <li class="footer__item"> 273 274 </li> 275 </ul> 276 </div> 277 </div> 278 <div class="footer__bottom text--center">
279 <div class="footer__copyright">Copyright © 2023 Motion Canvas. Built with Docusaurus.</div> 280 </div> 281 </div> 282 </footer> 283</div>
284<script src="/assets/js/runtime~main.d9a5732d.js"></script>
vendor: 1 bytes, line 284
284
285<script src="/assets/js/main.6aa94b2f.js"></script>
285 286
287<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"1b56d61f0b11461382ef5c8a5b32ae99","r":1,"spa":2}' crossorigin="anonymous"></script>
287 288</body>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.