https://motioncanvas.io/assets/js/20322784.90fdc6d8.js

1var _____WB$wombat$assign$function_____=function(name){return (globalThis._wb_wombat && globalThis._wb_wombat.local_init && globalThis._wb_wombat.local_init(name))||globalThis[name];};if(!globalThis.__WB_pmw){globalThis.__WB_pmw=function(obj){this.__WB_source=obj;return this;}}{
2let window = _____WB$wombat$assign$function_____("window");
3let self = _____WB$wombat$assign$function_____("self");
4let document = _____WB$wombat$assign$function_____("document");
5let location = _____WB$wombat$assign$function_____("location");
6let top = _____WB$wombat$assign$function_____("top");
7let parent = _____WB$wombat$assign$function_____("parent");
8let frames = _____WB$wombat$assign$function_____("frames");
9let opener = _____WB$wombat$assign$function_____("opener");
10"use strict";(self.webpackChunk_motion_canvas_docs=self.webpackChunk_motion_canvas_docs||[]).push([[8235],{876:(e,t,n)=>{n.d(t,{Zo:()=>m,kt:()=>p});var o=n(2784);function l(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(Object(n),!0).forEach((function(t){l(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function r(e,t){if(null==e)return{};var n,o,l=function(e,t){if(null==e)return{};var n,o,l={},a=Object.keys(e);for(o=0;o<a.length;o++)n=a[o],t.indexOf(n)>=0||(l[n]=e[n]);return l}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o<a.length;o++)n=a[o],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(l[n]=e[n])}return l}var s=o.createContext({}),c=function(e){var t=o.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},m=function(e){var t=c(e.components);return o.createElement(s.Provider,{value:t},e.children)},f="mdxType",h={inlineCode:"code",wrapper:function(e){var t=e.children;return o.createElement(o.Fragment,{},t)}},d=o.forwardRef((function(e,t){var n=e.components,l=e.mdxType,a=e.originalType,s=e.parentName,m=r(e,["components","mdxType","originalType","parentName"]),f=c(n),d=l,p=f["".concat(s,".").concat(d)]||f[d]||h[d]||a;return n?o.createElement(p,i(i({ref:t},m),{},{components:n})):o.createElement(p,i({ref:t},m))}));function p(e,t){var n=arguments,l=t&&t.mdxType;if("string"==typeof e||l){var a=n.length,i=new Array(a);i[0]=d;var r={};for(var s in t)hasOwnProperty.call(t,s)&&(r[s]=t[s]);r.originalType=e,r[f]="string"==typeof e?e:l,i[1]=r;for(var c=2;c<a;c++)i[c]=n[c];return o.createElement.apply(null,i)}return o.createElement.apply(null,n)}d.displayName="MDXCreateElement"},8180:(e,t,n)=>{n.d(t,{Z:()=>i});var o,l=n(2784);function a(){return a=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},a.apply(this,arguments)}const i=e=>{let{title:t,titleId:n,...i}=e;return l.createElement("svg",a({viewBox:"0 0 640 360",xmlns:"http://www.w3.org/2000/svg",xmlSpace:"preserve",style:{fillRule:"evenodd",clipRule:"evenodd",strokeLinejoin:"round",strokeMiterlimit:1.5},"aria-labelledby":n},i),t?l.createElement("title",{id:n},t):null,l.createElement("path",{style:{fill:"none"},d:"M0 0h640v360H0z"}),l.createElement("path",{style:{fill:"#181818"},d:"M0 0h640v360H0z"}),l.createElement("path",{style:{fill:"#242424"},d:"M79 78h561v282H79z"}),l.createElement("path",{style:{fill:"none",fillRule:"nonzero"},d:"M307 12h24v24h-24z"}),l.createElement("path",{d:"M315 17v14l11-7-11-7Z",style:{fill:"#959595",fillRule:"nonzero"}}),l.createElement("path",{style:{fill:"none",fillRule:"nonzero"},d:"M343 12h24v24h-24z"}),l.createElement("path",{d:"m349 30 8.5-6-8.5-6v12Zm10-12v12h2V18h-2Z",style:{fill:"#959595",fillRule:"nonzero"}}),l.createElement("path",{style:{fill:"none",fillRule:"nonzero"},d:"M271 12h24v24h-24z"}),l.createElement("path",{d:"M277 18h2v12h-2V18Zm3.5 6 8.5 6V18l-8.5 6Z",style:{fill:"#959595",fillRule:"nonzero"}}),l.createElement("path",{style:{fill:"none",fillRule:"nonzero"},d:"M379 12h24v24h-24z"}),l.createElement("path",{d:"M386 19h10v3l4-4-4-4v3h-12v6h2v-4Zm10 10h-10v-3l-4 4 4 4v-3h12v-6h-2v4Z",style:{fill:"#959595",fillRule:"nonzero"}}),l.createElement("path",{style:{fill:"none",fillRule:"nonzero"},d:"M235 12h24v24h-24z"}),l.createElement("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",fillRule:"nonzero"}}),l.createElement("path",{d:"M271 78v282M463 78v282",style:{fill:"none",stroke:"#1d1d1d",strokeWidth:2}}),l.createElement("path",{d:"M295 78v282M487 78v282M199 78v282",style:{fill:"none",stroke:"#202020",strokeWidth:2}}),l.createElement("path",{d:"M415 78v282M607 78v282M175 78v282",style:{fill:"none",stroke:"#1d1d1d",strokeWidth:2}}),l.createElement("path",{d:"M439 78v282M631 78v282",style:{fill:"none",stroke:"#202020",strokeWidth:2}}),l.createElement("path",{d:"M223 78v282M367 78v282M559 78v282M127 78v282",style:{fill:"none",stroke:"#1d1d1d",strokeWidth:2}}),l.createElement("path",{d:"M391 78v282M583 78v282M151 78v282",style:{fill:"none",stroke:"#202020",strokeWidth:2}}),l.createElement("path",{d:"M319 78v282M511 78v282M79 78v282M31 78v282M640 48H0",style:{fill:"none",stroke:"#1d1d1d",strokeWidth:2}}),l.createElement("path",{d:"M343 78v282M535 78v282M103 78v282M55 78v282M7 78v282",style:{fill:"none",stroke:"#202020",strokeWidth:2}}),l.createElement("path",{d:"M640 78H0",style:{fill:"none",stroke:"#1d1d1d",strokeWidth:2}}),l.createElement("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"}}),l.createElement("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"}}),l.createElement("text",{x:103,y:109.11,style:{fontFamily:"'JetBrainsMono-Regular','JetBrains Mono',monospace",fontSize:14,fill:"#fff",fillOpacity:.6}},"scene"),o||(o=l.createElement("path",{d:"M740 48H83c-2.208 0-4 1.792-4 4v22c0 2.208 1.792 4 4 4h557",fill:"#242424",stroke:"#444",strokeWidth:2})),l.createElement("g",null,l.createElement("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"}}),l.createElement("path",{d:"M431 144c0-6.627-5.373-12-12-12h-48v12

10c0 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"}}),l.createElement("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"}}),l.createElement("text",{x:380,y:148.11,style:{fontFamily:"'JetBrainsMono-Regular','JetBrains Mono',monospace",fontSize:14,fillOpacity:.87}},"event"),l.createElement("path",{style:{fill:"none"},d:"M423 152h24v24h-24z"}),l.createElement("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",fillRule:"nonzero"}})),l.createElement("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",strokeWidth:2,strokeLinecap:"square"}}),l.createElement("text",{x:215.8,y:67.38,style:{fontFamily:"'JetBrainsMono-Bold','JetBrains Mono',monospace",fontWeight:700,fontSize:12,fill:"#959595"}},"30"),l.createElement("text",{x:167.8,y:67.38,style:{fontFamily:"'JetBrainsMono-Bold','JetBrains Mono',monospace",fontWeight:700,fontSize:12,fill:"#959595"}},"30"),l.createElement("text",{x:119.8,y:67.38,style:{fontFamily:"'JetBrainsMono-Bold','JetBrains Mono',monospace",fontWeight:700,fontSize:12,fill:"#959595"}},"10"),l.createElement("text",{x:75.4,y:67.38,style:{fontFamily:"'JetBrainsMono-Bold','JetBrains Mono',monospace",fontWeight:700,fontSize:12,fill:"#959595"}},"0"),l.createElement("text",{x:263.8,y:67.38,style:{fontFamily:"'JetBrainsMono-Bold','JetBrains Mono',monospace",fontWeight:700,fontSize:12,fill:"#959595"}},"40"),l.createElement("text",{x:311.8,y:67.38,style:{fontFamily:"'JetBrainsMono-Bold','JetBrains Mono',monospace",fontWeight:700,fontSize:12,fill:"#959595"}},"50"),l.createElement("text",{x:455.8,y:67.38,style:{fontFamily:"'JetBrainsMono-Bold','JetBrains Mono',monospace",fontWeight:700,fontSize:12,fill:"#959595"}},"80"),l.createElement("text",{x:407.8,y:67.38,style:{fontFamily:"'JetBrainsMono-Bold','JetBrains Mono',monospace",fontWeight:700,fontSize:12,fill:"#959595"}},"70"),l.createElement("text",{x:548.2,y:67.38,style:{fontFamily:"'JetBrainsMono-Bold','JetBrains Mono',monospace",fontWeight:700,fontSize:12,fill:"#959595"}},"100"),l.createElement("text",{x:359.8,y:67.38,style:{fontFamily:"'JetBrainsMono-Bold','JetBrains Mono',monospace",fontWeight:700,fontSize:12,fill:"#959595"}},"60"),l.createElement("text",{x:503.8,y:67.38,style:{fontFamily:"'JetBrainsMono-Bold','JetBrains Mono',monospace",fontWeight:700,fontSize:12,fill:"#959595"}},"90"),l.createElement("text",{x:596.2,y:67.38,style:{fontFamily:"'JetBrainsMono-Bold','JetBrains Mono',monospace",fontWeight:700,fontSize:12,fill:"#959595"}},"110"),l.createElement("text",{x:20.2,y:67.38,style:{fontFamily:"'JetBrainsMono-Bold','JetBrains Mono',monospace",fontWeight:700,fontSize:12,fill:"#959595"}},"-10"),l.createElement("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"}}),l.createElement("text",{x:239.8,y:67.38,style:{fontFamily:"'JetBrainsMono-Bold','JetBrains Mono',monospace",fontWeight:700,fontSize:12,fill:"#fff"}},"35"),l.createElement("path",{d:"M247 72v288",style:{fill:"none",stroke:"#32a1f6",strokeWidth:2}}))}},1916:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>h,contentTitle:()=>m,default:()=>u,frontMatter:()=>c,metadata:()=>f,toc:()=>d});var o=n(7896),l=n(2784),a=n(876),i=n(8180);const r="root_NCjS";function s(){return l.createElement(i.Z,{className:r})}const c={sidebar_position:9,slug:"/time-events"},m="Time Events",f={unversionedId:"getting-started/time-events",id:"getting-started/time-events",title:"Time Events",description:"One of the pain points of creating explanatory animations using code is",source:"@site/docs/getting-started/time-events.mdx",sourceDirName:"getting-started",slug:"/time-events",permalink:"/docs/time-events",draft:!1,editUrl:"http://web.archive.org/web/20230315084657/https://github.com/motion-canvas/motion-canvas/blob/main/packages/docs/docs/getting-started/time-events.mdx",tags:[],version:"current",lastUpdatedBy:"Jacob",sidebarPosition:9,frontMatter:{

10sidebar_position:9,slug:"/time-events"},sidebar:"docs",previous:{title:"Tweening",permalink:"/docs/tweening"},next:{title:"Transitions",permalink:"/docs/transitions"}},h={},d=[{value:"Controlling animation duration",id:"controlling-animation-duration",level:2}],p={toc:d};function u(e){let{components:t,...n}=e;return(0,a.kt)("wrapper",(0,o.Z)({},p,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"time-events"},"Time Events"),(0,a.kt)("p",null,"One of the pain points of creating explanatory animations using code is\n",(0,a.kt)("strong",{parentName:"p"},"synchronizing them with audio"),". Imagine that you'd like a certain animation\nto start right after some specific verbal cue. With a code-only solution, you're\nleft with hard-coding how long (or until which frame) you want to wait."),(0,a.kt)("p",null,"In Motion Canvas, it could look somewhat like this:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-ts"},"yield * animationOne();\nyield * waitFor(3.1415); // but how long should we wait?\nyield * animationTwo();\n")),(0,a.kt)("p",null,"Evidently, this approach can get really tedious. Not only do you need to somehow\nfind the exact timestamp to wait for, but also each time you modify the\nvoiceover, you have to go through your code and adjust these hard-coded numbers."),(0,a.kt)("p",null,"That's why Motion Canvas allows you to edit these delays not through code, but\nthrough the editor. With the use of ",(0,a.kt)("a",{parentName:"p",href:"/api/core/flow#waitUntil"},(0,a.kt)("inlineCode",{parentName:"a"},"waitUntil"))," you\ncan pause the animation without specifying the actual duration:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-ts"},"yield * animationOne();\nyield * waitUntil('event'); // wait for an event called \"event\"\nyield * animationTwo();\n")),(0,a.kt)("p",null,"This will cause the event to appear in the editor. From there, you can drag it\nto adjust its timing:"),(0,a.kt)(s,{className:"image-inline",mdxType:"UI"}),(0,a.kt)("p",null,"The dark trail behind the event illustrates its duration. It starts at the\nmoment ",(0,a.kt)("inlineCode",{parentName:"p"},"waitUntil")," was called - this is when the animation will pause. It will\nresume when the playhead reaches the event pill."),(0,a.kt)("p",null,"By default, adjusting a time event will also adjust all events that happen after\nit. This is useful when you want to extend or shorten a pause in your voiceover\nbecause correcting the first time event after the pause will also fix all events\nafter it. You can hold ",(0,a.kt)("inlineCode",{parentName:"p"},"SHIFT")," when editing an event to prevent this from\nhappening."),(0,a.kt)("h2",{id:"controlling-animation-duration"},"Controlling animation duration"),(0,a.kt)("p",null,"Aside from specifying ",(0,a.kt)("em",{parentName:"p"},"when")," something should happen, Time Events can also be\nused to control ",(0,a.kt)("em",{parentName:"p"},"how long")," something should last. You can use the\n",(0,a.kt)("a",{parentName:"p",href:"/api/core/utils#useDuration"},(0,a.kt)("inlineCode",{parentName:"a"},"useDuration"))," function to retrieve the duration\nof an event and use it in your animation:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-ts"},"yield * circle().scale(2, useDuration('event'));\n")))}u.isMDXComponent=!0}}]);