1<!DOCTYPE html> 2<meta charset="utf-8"><meta name="generator" content="Docusaurus v2.3.1"><title data-rh="true">Motion Canvas - Visualize complex ideas programmatically</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:image" content="https://motion-canvas.github.io/img/banner.png"><meta data-rh="true" name="twitter:image" content="https://motion-canvas.github.io/img/banner.png"><meta data-rh="true" property="og:url" content="https://motion-canvas.github.io/"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docusaurus_tag" content="default"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docsearch:docusaurus_tag" content="default"><meta data-rh="true" name="keywords" content="typescript, animation, library"><meta data-rh="true" name="description" content="Visualize complex ideas programmatically"><meta data-rh="true" property="og:description" content="Visualize complex ideas programmatically"><meta data-rh="true" property="og:title" content="Motion Canvas"><link data-rh="true" rel="icon" href="/img/favicon.ico"><link data-rh="true" rel="preconnect" href="https://q6z7bj83rf-dsn.algolia.net/" crossorigin="anonymous">
2<script data-rh="true">function maybeInsertBanner(){window.__DOCUSAURUS_INSERT_BASEURL_BANNER&&insertBanner()}function insertBanner(){var n=document.getElementById("docusaurus-base-url-issue-banner-container");if(n){n.innerHTML='\n<div id="docusaurus-base-url-issue-banner" style="border: thick solid red; background-color: rgb(255, 230, 179); margin: 20px; padding: 20px; font-size: 20px;">\n <p style="font-weight: bold; font-size: 30px;">Your Docusaurus site did not load properly.\n <p>A very common reason is a wrong site <a href="https://docusaurus.io/docs/docusaurus.config.js/#baseurl" style="font-weight: bold;">baseUrl configuration.\n <p>Current configured baseUrl = <span style="font-weight: bold; color: red;">/ (default value)\n <p>We suggest trying baseUrl = <span id="docusaurus-base-url-issue-banner-suggestion-container" style="font-weight: bold; color: green;">\n\n';var e=document.getElementById("docusaurus-base-url-issue-banner-suggestion-container"),s=window.location.pathname,r="/"===s.substr(-1)?s:s+"/";e.innerHTML=r}}window.__DOCUSAURUS_INSERT_BASEURL_BANNER=!0,document.addEventListener("DOMContentLoaded",maybeInsertBanner)</script>
2<link rel="alternate" type="application/rss+xml" href="/blog/rss.xml" title="Motion Canvas RSS Feed"><link rel="alternate" type="application/atom+xml" href="/blog/atom.xml" title="Motion Canvas Atom Feed"><link rel="search" type="application/opensearchdescription+xml" title="Motion Canvas" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ac615c4e.css"><link rel="preload" href="/assets/js/runtime~main.87e6562d.js" as="script"><link rel="preload" href="/assets/js/main.2373b22b.js" as="script"><body class="navigation-with-keyboard"> 3
3<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>
3 4 5<div id="__docusaurus"> 6 <div id="docusaurus-base-url-issue-banner-container"></div> 7 <div role="region" aria-label="Skip to main content"> 8 <a class="skipToContent_G6ar" href="#docusaurus_skipToContent_fallback">Skip to main content</a> 9 </div> 10 <nav aria-label="Main" class="navbar navbar--fixed-top"> 11 <div class="navbar__inner"> 12 <div class="navbar__items"> 13 14 <a class="navbar__brand" href="/"> 15 <div class="navbar__logo"> 16 <img src="/img/logo.svg" alt="Motion Canvas Logo" class="themedImage_RWGG themedImage--light_riBm"> 17 <img src="/img/logo_dark.svg" alt="Motion Canvas Logo" class="themedImage_RWGG themedImage--dark_Dsi0"> 18 </div> 19 <b class="navbar__title text--truncate">Motion Canvas</b> 20 </a> 21 <a class="navbar__item navbar__link" href="/docs/">Docs</a> 22 <a class="navbar__item navbar__link" href="/api/core">API</a> 23 <a class="navbar__item navbar__link" href="/blog">Blog</a> 24 </div> 25 <div class="navbar__items navbar__items--right"> 26 27 <div class="toggle_OLSw colorModeToggle_x44X"> 28 29 </div> 30 <div class="root_TZLv loading_lRyv"> 31 <div class="badge_yk5a"> 32 <small> 33 <strong></strong> 34 stars 35 </small> 36 </div> 37 38 </div> 39 <div class="root_TZLv loading_lRyv"> 40 <div class="badge_yk5a"> 41 <small> 42 <strong></strong> 43 online 44 </small> 45 </div> 46 47 </div> 48 </div> 49 </div> 50 <div role="presentation" class="navbar-sidebar__backdrop"></div> 51 </nav> 52 <div id="docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_UyTV"> 53 <header class="banner_MNUK"> 54 <h1 class="title_NqGg"> 55 Visualize Complex 56 <br> 57 Ideas 58 <b>Programmatically</b> 59 </h1> 60 <h1 class="title_NqGg mobile_Pepa"> 61 Visualize 62 <br> 63 Complex Ideas 64 <br> 65 <b>Programmatically</b> 66 </h1> 67 <div class="buttons_QzIi"> 68 <a class="button button--primary button--lg" href="/docs">Get Started</a> 69 70 </div> 71 </header> 72 <main> 73 <section class="features_ZjNC"> 74 <div class="container"> 75 <div class="feature_vtlg row"> 76 <div class="col col--6 col--offset-1"> 77 <div class="preview_mrMv"> 78 <svg viewbox="0 0 640 360" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.5"> 79 <path style="fill:none" d="M0 0h640v360H0z"></path> 80 <path style="fill:#181818" d="M0 0h640v360H0z"></path> 81 <path style="fill:#242424" d="M79 78h561v282H79z"></path> 82 <path style="fill:none;fill-rule:nonzero" d="M307 12h24v24h-24z"></path> 83 <path d="M315 17v14l11-7-11-7Z" style="fill:#959595;fill-rule:nonzero"></path> 84 <path style="fill:none;fill-rule:nonzero" d="M343 12h24v24h-24z"></path> 85 <path d="m349 30 8.5-6-8.5-6v12Zm10-12v12h2V18h-2Z" style="fill:#959595;fill-rule:nonzero"></path> 86 <path style="fill:none;fill-rule:nonzero" d="M271 12h24v24h-24z"></path> 87 <path d="M277 18h2v12h-2V18Zm3.5 6 8.5 6V18l-8.5 6Z" style="fill:#959595;fill-rule:nonzero"></path> 88 <path style="fill:none;fill-rule:nonzero" d="M379 12h24v24h-24z"></path> 89 <path d="M386 19h10v3l4-4-4-4v3h-12v6h2v-4Zm10 10h-10v-3l-4 4 4 4v-3h12v-6h-2v4Z" style="fill:#959595;fill-rule:nonzero"></path> 90 <path style="fill:none;fill-rule:nonzero" d="M235 12h24v24h-24z"></path> 91 <path d="M238 21v6h4l5 5V16l-5 5h-4Zm13.5 3a4.5 4.5 0 0 0-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02Zm-2.5-8.77v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77 0-4.28-2.99-7.86-7-8.77Z" style="fill:#959595;fill-rule:nonzero"></path> 92 <path d="M271 78v282M463 78v282" style="fill:none;stroke:#1d1d1d;stroke-width:2"></path> 93 <path d="M295 78v282M487 78v282M199 78v282" style="fill:none;stroke:#202020;stroke-width:2"></path> 94 <path d="M415 78v282M607 78v282M175 78v282" style="fill:none;stroke:#1d1d1d;stroke-width:2"></path> 95 <path d="M439 78v282M631 78v282" style="fill:none;stroke:#202020;stroke-width:2"></path> 96 <path d="M223 78v282M367 78v282M559 78v282M127 78v282" style="fill:none;stroke:#1d1d1d;stroke-width:2"></path> 97 <path d="M391 78v282M583 78v282M151 78v282" style="fill:none;stroke:#202020;stroke-width:2"></path> 98 <path d="M319 78v282M511 78v282M79 78v282M31 78v282M640 48H0" style="fill:none;stroke:#1d1d1d;stroke-width:2"></path> 99 <path d="M343 78v282M535 78v282M103 78v282M55 78v282M7 78v282" style="fill:none;stroke:#202020;stroke-width:2"></path> 100 <path d="M640 78H0" style="fill:none;stroke:#1d1d1d;stroke-width:2"></path> 101 <path d="M308.534 144c0-6.627-5.372-12-12-12H175.466c-6.628 0-12 5.373-12 12s5.372 12 12 12h121.068c6.628 0 12-5.373 12-12Z" style="fill:#274358"></path> 102 <path d="M637 88a3.995 3.995 0 0 0-1.172-2.828A3.995 3.995 0 0 0 633 84H89a3.995 3.995 0 0 0-2.828 1.172A3.995 3.995 0 0 0 85 88v34c0 1.061.421 2.078 1.172 2.828A3.995 3.995 0 0 0 89 126h544a3.995 3.995 0 0 0 2.828-1.172A3.995 3.995 0 0 0 637 122V88Z" style="fill:#444"></path> 103 <text x="103" y="109.11" style="font-family:'JetBrainsMono-Regular','JetBrains Mono',monospace;font-size:14px;fill:#fff;fill-opacity:0.6">scene</text> 104 <path d="M640 48H83c-2.208 0-4 1.792-4 4v22c0 2.208 1.792 4 4 4h557V48Z" style="fill:#1e3a4f"></path> 105 <path d="M79 73.9v.002A4.098 4.098 0 0 0 83.098 78H640" style="fill:none;stroke:#32a1f6;stroke-width:2"></path> 106 <g> 107 <path d="M407 144c0-6.627-5.373-12-12-12H281c-6.627 0-12 5.373-12 12s5.373 12 12 12h114c6.627 0 12-5.373 12-12Z" style="fill:#274358"></path> 108 <path d="M431 144c0-6.627-5.373-12-12-12h-48v12
108c0 3.183 1.264 6.235 3.515 8.485A11.996 11.996 0 0 0 383 156h36c6.627 0 12-5.373 12-12Z" style="fill:#33a6ff"></path> 109 <path d="M431 144c0 6.627-5.373 12-12 12h-36a11.996 11.996 0 0 1-8.485-3.515A11.996 11.996 0 0 1 371 144v-12h48c6.627 0 12 5.373 12 12Zm-2 0c0-5.523-4.477-10-10-10h-46v10a10.001 10.001 0 0 0 10 10h36c5.523 0 10-4.477 10-10Z" style="fill:#fff"></path> 110 <text x="380" y="148.11" style="font-family:'JetBrainsMono-Regular','JetBrains Mono',monospace;font-size:14px;fill-opacity:0.87">event</text> 111 <path style="fill:none" d="M423 152h24v24h-24z"></path> 112 <path d="M446 157.5V172c0 2.2-1.8 4-4 4h-7.3c-1.08 0-2.1-.43-2.85-1.19l-7.85-7.98s1.26-1.23 1.3-1.25c.22-.19.49-.29.79-.29.22 0 .42.06.6.16.04.01 4.31 2.46 4.31 2.46V156c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5v7h1v-9.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5v9.5h1v-8.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5v8.5h1v-5.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5Z" style="fill:#fff;fill-rule:nonzero"></path> 113 </g> 114 <path d="M79 210h126l2-4 2 14 2-22 2 26 2-30 2 34 2-44 2 40 2-40 2 54 2-62 2 54 2-38 2 38 2-42 2 38 2-30 2 26 2-20 2 14 2-12 2 10 2-12 2 18 2-16 2 10 2-6 2 2h16l2-4 2 8 2-10 2 18 2-30 2 36 2-40 2 42 2-50 2 54 2-52 2 58 2-54 2 50 2-44 2 40 2-42 2 38.091L315 184l2 46 2-50 2 52 2-50 2 52 2-46 2 42 2-32 2 28 2-26 2 20 2-16 2 20 2-24 2 30 2-36 2 40 2-48 2 50 2-44 2 36 2-30 2.415 24L363 204l2 14 2-20 2 26 2-22 2 16 2-10 2 2h262" style="fill:none;stroke:#444;stroke-width:2;stroke-linecap:square"></path> 115 <text x="215.8" y="67.38" style="font-family:'JetBrainsMono-Bold','JetBrains Mono',monospace;font-weight:700;font-size:12px;fill:#959595">30</text> 116 <text x="167.8" y="67.38" style="font-family:'JetBrainsMono-Bold','JetBrains Mono',monospace;font-weight:700;font-size:12px;fill:#959595">30</text> 117 <text x="119.8" y="67.38" style="font-family:'JetBrainsMono-Bold','JetBrains Mono',monospace;font-weight:700;font-size:12px;fill:#959595">10</text> 118 <text x="75.4" y="67.38" style="font-family:'JetBrainsMono-Bold','JetBrains Mono',monospace;font-weight:700;font-size:12px;fill:#959595">0</text> 119 <text x="263.8" y="67.38" style="font-family:'JetBrainsMono-Bold','JetBrains Mono',monospace;font-weight:700;font-size:12px;fill:#959595">40</text> 120 <text x="311.8" y="67.38" style="font-family:'JetBrainsMono-Bold','JetBrains Mono',monospace;font-weight:700;font-size:12px;fill:#959595">50</text> 121 <text x="455.8" y="67.38" style="font-family:'JetBrainsMono-Bold','JetBrains Mono',monospace;font-weight:700;font-size:12px;fill:#959595">80</text> 122 <text x="407.8" y="67.38" style="font-family:'JetBrainsMono-Bold','JetBrains Mono',monospace;font-weight:700;font-size:12px;fill:#959595">70</text> 123 <text x="548.2" y="67.38" style="font-family:'JetBrainsMono-Bold','JetBrains Mono',monospace;font-weight:700;font-size:12px;fill:#959595">100</text> 124 <text x="359.8" y="67.38" style="font-family:'JetBrainsMono-Bold','JetBrains Mono',monospace;font-weight:700;font-size:12px;fill:#959595">60</text> 125 <text x="503.8" y="67.38" style="font-family:'JetBrainsMono-Bold','JetBrains Mono',monospace;font-weight:700;font-size:12px;fill:#959595">90</text> 126 <text x="596.2" y="67.38" style="font-family:'JetBrainsMono-Bold','JetBrains Mono',monospace;font-weight:700;font-size:12px;fill:#959595">110</text> 127 <text x="20.2" y="67.38" style="font-family:'JetBrainsMono-Bold','JetBrains Mono',monospace;font-weight:700;font-size:12px;fill:#959595">-10</text> 128 <path d="M259 58a3.995 3.995 0 0 0-1.172-2.828A3.995 3.995 0 0 0 255 54h-16a3.995 3.995 0 0 0-2.828 1.172A3.995 3.995 0 0 0 235 58v10c0 1.061.421 2.078 1.172 2.828A3.995 3.995 0 0 0 239 72h16a3.995 3.995 0 0 0 2.828-1.172A3.995 3.995 0 0 0 259 68V58Z" style="fill:#32a1f6"></path> 129 <text x="239.8" y="67.38" style="font-family:'JetBrainsMono-Bold','JetBrains Mono',monospace;font-weight:700;font-size:12px;fill:#fff">35</text> 130 <path d="M247 72v288" style="fill:none;stroke:#32a1f6;stroke-width:2"></path> 131 </svg> 132 </div> 133 </div> 134 <div class="col col--4 padding-top--lg"> 135 <h3> 136 Best of 137 <b>Both</b> 138 Worlds 139 </h3> 140 <p>Some things are easier with a mouse. Write animations in TypeScript with your favorite IDE; Use a web-based editor to sync them with audio.</p> 141 <p> 142 Powered by 143 <a href="https://vitejs.dev/" target="_blank" rel="nofollow">Vite</a> 144 , a real-time preview of your animation automatically updates upon any changes. 145 </p> 146 <p> 147 <a class="button button--outline button--lg" href="/editor/quickstart" target="_blank">Try the Editor</a> 148 </p> 149 </div> 150 </div> 151 <div class="feature_vtlg row"> 152 <div class="col col--6 col--offset-1"> 153 <div class="preview_mrMv"> 154 <div class="language-tsx codeBlockContainer_ZGJx theme-code-block" style="--prism-color:#f8f8f8;--prism-background-color:var(--code-background-color)"> 155 <div class="codeBlockContent_qZBB"> 156 <pre tabindex="0" class="prism-code language-tsx codeBlock_TAPP thin-scrollbar"> 157 <code class="codeBlockLines_AdAo">
158 <span class="token-line" style="color:#f8f8f8"> 159 <span class="token keyword" style="color:rgb(86, 156, 214)">export</span> 160 <span class="token plain"></span> 161 <span class="token function" style="color:rgb(220, 220, 170)">makeScene</span> 162 <span class="token punctuation" style="color:rgb(212, 212, 212)">(</span> 163 <span class="token keyword" style="color:rgb(86, 156, 214)">function</span> 164 <span class="token operator" style="color:rgb(212, 212, 212)">*</span> 165 <span class="token plain"></span> 166 <span class="token punctuation" style="color:rgb(212, 212, 212)">(</span> 167 <span class="token plain">view</span> 168 <span class="token punctuation" style="color:rgb(212, 212, 212)">)</span> 169 <span class="token plain"></span> 170 <span class="token punctuation" style="color:rgb(212, 212, 212)">{</span> 171 <span class="token plain"></span> 172 <br> 173 </span> 174 <span class="token-line" style="color:#f8f8f8"> 175 <span class="token plain"></span> 176 <span class="token keyword" style="color:rgb(86, 156, 214)">const</span> 177 <span class="token plain"> circle </span> 178 <span class="token operator" style="color:rgb(212, 212, 212)">=</span> 179 <span class="token plain"></span> 180 <span class="token generic-function function" style="color:rgb(220, 220, 170)">createRef</span> 181 <span class="token generic-function generic class-name operator" style="color:rgb(212, 212, 212)"><</span> 182 <span class="token generic-function generic class-name" style="color:rgb(78, 201, 176)">Circle</span> 183 <span class="token generic-function generic class-name operator" style="color:rgb(212, 212, 212)">></span> 184 <span class="token punctuation" style="color:rgb(212, 212, 212)">(</span> 185 <span class="token punctuation" style="color:rgb(212, 212, 212)">)</span> 186 <span class="token punctuation" style="color:rgb(212, 212, 212)">;</span> 187 <span class="token plain"></span> 188 <br> 189 </span> 190 <span class="token-line" style="color:#f8f8f8"> 191 <span class="token plain"> view</span> 192 <span class="token punctuation" style="color:rgb(212, 212, 212)">.</span> 193 <span class="token method function property-access" style="color:rgb(220, 220, 170)">add</span> 194 <span class="token punctuation" style="color:rgb(212, 212, 212)">(</span> 195 <span class="token plain"></span> 196 <br> 197 </span> 198 <span class="token-line" style="color:#f8f8f8"> 199 <span class="token plain"></span> 200 <span class="token tag punctuation" style="color:rgb(212, 212, 212)"><</span> 201 <span class="token tag class-name" style="color:rgb(78, 201, 176)">Circle</span> 202 <span class="token tag" style="color:rgb(78, 201, 176)"></span> 203 <br> 204 </span> 205 <span class="token-line" style="color:#f8f8f8"> 206 <span class="token tag" style="color:rgb(78, 201, 176)"></span> 207 <span class="token tag attr-name" style="color:rgb(156, 220, 254)">ref</span> 208 <span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(212, 212, 212)">=</span>
209 <span class="token tag script language-javascript punctuation" style="color:rgb(212, 212, 212)">{</span> 210 <span class="token tag script language-javascript" style="color:rgb(78, 201, 176)">circle</span> 211 <span class="token tag script language-javascript punctuation" style="color:rgb(212, 212, 212)">}</span> 212 <span class="token tag" style="color:rgb(78, 201, 176)"></span> 213 <br> 214 </span> 215 <span class="token-line" style="color:#f8f8f8"> 216 <span class="token tag" style="color:rgb(78, 201, 176)"></span> 217 <span class="token tag attr-name" style="color:rgb(156, 220, 254)">width</span> 218 <span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(212, 212, 212)">=</span> 219 <span class="token tag script language-javascript punctuation" style="color:rgb(212, 212, 212)">{</span> 220 <span class="token tag script language-javascript number" style="color:rgb(181, 206, 168)">320</span> 221 <span class="token tag script language-javascript punctuation" style="color:rgb(212, 212, 212)">}</span> 222 <span class="token tag" style="color:rgb(78, 201, 176)"></span> 223 <br> 224 </span> 225 <span class="token-line" style="color:#f8f8f8"> 226 <span class="token tag" style="color:rgb(78, 201, 176)"></span> 227 <span class="token tag attr-name" style="color:rgb(156, 220, 254)">height</span> 228 <span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(212, 212, 212)">=</span> 229 <span class="token tag script language-javascript punctuation" style="color:rgb(212, 212, 212)">{</span> 230 <span class="token tag script language-javascript number" style="color:rgb(181, 206, 168)">320</span> 231 <span class="token tag script language-javascript punctuation" style="color:rgb(212, 212, 212)">}</span> 232 <span class="token tag" style="color:rgb(78, 201, 176)"></span> 233 <br> 234 </span> 235 <span class="token-line" style="color:#f8f8f8"> 236 <span class="token tag" style="color:rgb(78, 201, 176)"></span> 237 <span class="token tag attr-name" style="color:rgb(156, 220, 254)">fill</span> 238 <span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(212, 212, 212)">=</span> 239 <span class="token tag script language-javascript punctuation" style="color:rgb(212, 212, 212)">{</span> 240 <span class="token tag script language-javascript string" style="color:rgb(206, 145, 120)">'blue'</span> 241 <span class="token tag script language-javascript punctuation" style="color:rgb(212, 212, 212)">}</span> 242 <span class="token tag" style="color:rgb(78, 201, 176)"></span> 243 <br> 244 </span> 245 <span class="token-line" style="color:#f8f8f8"> 246 <span class="token tag" style="color:rgb(78, 201, 176)"></span> 247 <span class="token tag punctuation" style="color:rgb(212, 212, 212)">/></span> 248 <span class="token plain"></span> 249 <br> 250 </span> 251 <span class="token-line" style="color:#f8f8f8"> 252 <span class="token plain"></span> 253 <span class="token punctuation" style="color:rgb(212, 212, 212)">)</span> 254 <span class="token punctuation" style="color:rgb(212, 212, 212)">;</span>
255 <span class="token plain"></span> 256 <br> 257 </span> 258 <span class="token-line" style="color:#f8f8f8"> 259 <span class="token plain"></span> 260 <br> 261 </span> 262 <span class="token-line" style="color:#f8f8f8"> 263 <span class="token plain"></span> 264 <span class="token keyword" style="color:rgb(86, 156, 214)">yield</span> 265 <span class="token operator" style="color:rgb(212, 212, 212)">*</span> 266 <span class="token plain"></span> 267 <span class="token function" style="color:rgb(220, 220, 170)">circle</span> 268 <span class="token punctuation" style="color:rgb(212, 212, 212)">(</span> 269 <span class="token punctuation" style="color:rgb(212, 212, 212)">)</span> 270 <span class="token punctuation" style="color:rgb(212, 212, 212)">.</span> 271 <span class="token method function property-access" style="color:rgb(220, 220, 170)">scale</span> 272 <span class="token punctuation" style="color:rgb(212, 212, 212)">(</span> 273 <span class="token number" style="color:rgb(181, 206, 168)">2</span> 274 <span class="token punctuation" style="color:rgb(212, 212, 212)">,</span> 275 <span class="token plain"></span> 276 <span class="token number" style="color:rgb(181, 206, 168)">0.3</span> 277 <span class="token punctuation" style="color:rgb(212, 212, 212)">)</span> 278 <span class="token punctuation" style="color:rgb(212, 212, 212)">;</span> 279 <span class="token plain"></span> 280 <br> 281 </span> 282 <span class="token-line" style="color:#f8f8f8"> 283 <span class="token plain"></span> 284 <span class="token keyword" style="color:rgb(86, 156, 214)">yield</span> 285 <span class="token operator" style="color:rgb(212, 212, 212)">*</span> 286 <span class="token plain"></span> 287 <span class="token function" style="color:rgb(220, 220, 170)">waitUntil</span> 288 <span class="token punctuation" style="color:rgb(212, 212, 212)">(</span> 289 <span class="token string" style="color:rgb(206, 145, 120)">'event'</span> 290 <span class="token punctuation" style="color:rgb(212, 212, 212)">)</span> 291 <span class="token punctuation" style="color:rgb(212, 212, 212)">;</span> 292 <span class="token plain"></span> 293 <br> 294 </span> 295 <span class="token-line" style="color:#f8f8f8"> 296 <span class="token plain"></span> 297 <span class="token keyword" style="color:rgb(86, 156, 214)">yield</span> 298 <span class="token operator" style="color:rgb(212, 212, 212)">*</span> 299 <span class="token plain"></span> 300 <span class="token function" style="color:rgb(220, 220, 170)">all</span> 301 <span class="token punctuation" style="color:rgb(212, 212, 212)">(</span> 302 <span class="token plain"></span> 303 <br> 304 </span> 305 <span class="token-line" style="color:#f8f8f8"> 306 <span class="token plain"></span> 307 <span class="token function" style="color:rgb(220, 220, 170)">circle</span> 308 <span class="token punctuation" style="color:rgb(212, 212, 212)">(</span>
309 <span class="token punctuation" style="color:rgb(212, 212, 212)">)</span> 310 <span class="token punctuation" style="color:rgb(212, 212, 212)">.</span> 311 <span class="token method function property-access" style="color:rgb(220, 220, 170)">scale</span> 312 <span class="token punctuation" style="color:rgb(212, 212, 212)">(</span> 313 <span class="token number" style="color:rgb(181, 206, 168)">1</span> 314 <span class="token punctuation" style="color:rgb(212, 212, 212)">,</span> 315 <span class="token plain"></span> 316 <span class="token number" style="color:rgb(181, 206, 168)">0.3</span> 317 <span class="token punctuation" style="color:rgb(212, 212, 212)">)</span> 318 <span class="token punctuation" style="color:rgb(212, 212, 212)">,</span> 319 <span class="token plain"></span> 320 <br> 321 </span> 322 <span class="token-line" style="color:#f8f8f8"> 323 <span class="token plain"></span> 324 <span class="token function" style="color:rgb(220, 220, 170)">circle</span> 325 <span class="token punctuation" style="color:rgb(212, 212, 212)">(</span> 326 <span class="token punctuation" style="color:rgb(212, 212, 212)">)</span> 327 <span class="token punctuation" style="color:rgb(212, 212, 212)">.</span> 328 <span class="token property-access">position</span> 329 <span class="token punctuation" style="color:rgb(212, 212, 212)">.</span> 330 <span class="token method function property-access" style="color:rgb(220, 220, 170)">y</span> 331 <span class="token punctuation" style="color:rgb(212, 212, 212)">(</span> 332 <span class="token number" style="color:rgb(181, 206, 168)">200</span> 333 <span class="token punctuation" style="color:rgb(212, 212, 212)">,</span> 334 <span class="token plain"></span> 335 <span class="token number" style="color:rgb(181, 206, 168)">0.3</span> 336 <span class="token punctuation" style="color:rgb(212, 212, 212)">)</span> 337 <span class="token punctuation" style="color:rgb(212, 212, 212)">,</span> 338 <span class="token plain"></span> 339 <br> 340 </span> 341 <span class="token-line" style="color:#f8f8f8"> 342 <span class="token plain"></span> 343 <span class="token punctuation" style="color:rgb(212, 212, 212)">)</span> 344 <span class="token punctuation" style="color:rgb(212, 212, 212)">;</span> 345 <span class="token plain"></span> 346 <br> 347 </span> 348 <span class="token-line" style="color:#f8f8f8"> 349 <span class="token plain"></span> 350 <span class="token keyword" style="color:rgb(86, 156, 214)">yield</span> 351 <span class="token operator" style="color:rgb(212, 212, 212)">*</span> 352 <span class="token plain"></span> 353 <span class="token function" style="color:rgb(220, 220, 170)">circle</span> 354 <span class="token punctuation" style="color:rgb(212, 212, 212)">(</span> 355 <span class="token punctuation" style="color:rgb(212, 212, 212)">)</span> 356 <span class="token punctuation" style="color:rgb(212, 212, 212)">.</span> 357 <span class="token method function property-access" style="color:rgb(220, 220, 170)">fill</span>
358 <span class="token punctuation" style="color:rgb(212, 212, 212)">(</span> 359 <span class="token string" style="color:rgb(206, 145, 120)">'green'</span> 360 <span class="token punctuation" style="color:rgb(212, 212, 212)">,</span> 361 <span class="token plain"></span> 362 <span class="token number" style="color:rgb(181, 206, 168)">0.3</span> 363 <span class="token punctuation" style="color:rgb(212, 212, 212)">)</span> 364 <span class="token punctuation" style="color:rgb(212, 212, 212)">;</span> 365 <span class="token plain"></span> 366 <br> 367 </span> 368 <span class="token-line" style="color:#f8f8f8"> 369 <span class="token plain"></span> 370 <span class="token punctuation" style="color:rgb(212, 212, 212)">}</span> 371 <span class="token punctuation" style="color:rgb(212, 212, 212)">)</span> 372 <span class="token punctuation" style="color:rgb(212, 212, 212)">;</span> 373 <br> 374 </span> 375 </code> 376 </pre> 377 <div class="buttonGroup_TNwR"> 378 379 </div> 380 </div> 381 </div> 382 </div> 383 </div> 384 <div class="col col--4 padding-top--lg"> 385 <h3> 386 <b>Procedural</b> 387 for a Change 388 </h3> 389 <p>Let the execution of your code define the animation. Write generator functions that describe what should happen - step by step.</p> 390 <p>Focus on duration, speed and acceleration instead of hardcoded key frames.</p> 391 <p> 392 <a class="button button--outline button--lg" href="/docs/quickstart">Learn More</a> 393 </p> 394 </div> 395 </div> 396 <div class="feature_vtlg row"> 397 <div class="col col--6 col--offset-1"> 398 <div class="preview_mrMv"> 399 400 </div> 401 </div> 402 <div class="col col--4 padding-top--lg"> 403 <h3> 404 <b>Tested</b> 405 in Combat 406 </h3> 407 <p>The road ahead is still long, but you can already use Motion Canvas to create production-quality animations.</p> 408 <p> 409 410 </p> 411 </div> 412 </div> 413 </div> 414 </section> 415 </main> 416 </div> 417 <footer class="footer"> 418 <div class="container container-fluid"> 419 <div class="row footer__links"> 420 <div class="col footer__col"> 421 <div class="footer__title">Docs</div> 422 <ul class="footer__items clean-list"> 423 <li class="footer__item"> 424 <a class="footer__link-item" href="/docs">Docs</a> 425 </li> 426 <li class="footer__item"> 427 <a class="footer__link-item" href="/api/core">API</a> 428 </li> 429 </ul> 430 </div> 431 <div class="col footer__col"> 432 <div class="footer__title">Community</div> 433 <ul class="footer__items clean-list"> 434 <li class="footer__item"> 435 436 </li> 437 <li class="footer__item"> 438 439 </li> 440 <li class="footer__item"> 441 442 </li> 443 </ul> 444 </div> 445 <div class="col footer__col"> 446 <div class="footer__title">More</div> 447 <ul class="footer__items clean-list"> 448 <li class="footer__item"> 449 <a class="footer__link-item" href="/blog">Blog</a> 450 </li> 451 <li class="footer__item"> 452 453 </li> 454 </ul> 455 </div> 456 </div> 457 <div class="footer__bottom text--center"> 458 <div class="footer__copyright">Copyright © 2023 Motion Canvas. Built with Docusaurus.</div> 459 </div> 460 </div> 461 </footer> 462</div>
463<script src="/assets/js/runtime~main.87e6562d.js"></script>
vendor: 1 bytes, line 463
463
464<script src="/assets/js/main.2373b22b.js"></script>
464 465
466<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>
466 467</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.