https://motioncanvas.io/assets/js/3a33b26b.8486cb09.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([[3759],{876:(e,t,n)=>{n.d(t,{Zo:()=>d,kt:()=>f});var o=n(2784);function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(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 a(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?r(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function s(e,t){if(null==e)return{};var n,o,i=function(e,t){if(null==e)return{};var n,o,i={},r=Object.keys(e);for(o=0;o<r.length;o++)n=r[o],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(o=0;o<r.length;o++)n=r[o],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var l=o.createContext({}),c=function(e){var t=o.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):a(a({},t),e)),n},d=function(e){var t=c(e.components);return o.createElement(l.Provider,{value:t},e.children)},p="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return o.createElement(o.Fragment,{},t)}},m=o.forwardRef((function(e,t){var n=e.components,i=e.mdxType,r=e.originalType,l=e.parentName,d=s(e,["components","mdxType","originalType","parentName"]),p=c(n),m=i,f=p["".concat(l,".").concat(m)]||p[m]||u[m]||r;return n?o.createElement(f,a(a({ref:t},d),{},{components:n})):o.createElement(f,a({ref:t},d))}));function f(e,t){var n=arguments,i=t&&t.mdxType;if("string"==typeof e||i){var r=n.length,a=new Array(r);a[0]=m;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s[p]="string"==typeof e?e:i,a[1]=s;for(var c=2;c<r;c++)a[c]=n[c];return o.createElement.apply(null,a)}return o.createElement.apply(null,n)}m.displayName="MDXCreateElement"},5245:(e,t,n)=>{n.d(t,{A:()=>r});var o=n(7896),i=n(2784);function r(e){let{width:t=24,height:n=24,...r}=e;return i.createElement("svg",(0,o.Z)({width:t,height:n,viewBox:"0 0 24 24",fill:"currentColor"},r),i.createElement("path",{d:"M15 8v8H5V8h10m1-2H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4V7c0-.55-.45-1-1-1z"}))}},7517:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>s,default:()=>u,frontMatter:()=>a,metadata:()=>l,toc:()=>d});var o=n(7896),i=(n(2784),n(876)),r=n(5245);const a={sidebar_position:15,slug:"/presentation"},s="Presentation",l={unversionedId:"getting-started/presentation",id:"getting-started/presentation",title:"Presentation",description:"Aside from exporting your animations, you can use Motion Canvas to present them",source:"@site/docs/getting-started/presentation.mdx",sourceDirName:"getting-started",slug:"/presentation",permalink:"/docs/presentation",draft:!1,editUrl:"http://web.archive.org/web/20230315084657/https://github.com/motion-canvas/motion-canvas/blob/main/packages/docs/docs/getting-started/presentation.mdx",tags:[],version:"current",lastUpdatedBy:"Jacob",sidebarPosition:15,frontMatter:{

10sidebar_position:15,slug:"/presentation"},sidebar:"docs",previous:{title:"Rendering",permalink:"/docs/rendering"},next:{title:"Configuration",permalink:"/docs/configuration"}},c={},d=[{value:"<code>beginSlide</code> function",id:"beginslide-function",level:2},{value:"Presentation Mode",id:"presentation-mode",level:2}],p={toc:d};function u(e){let{components:t,...n}=e;return(0,i.kt)("wrapper",(0,o.Z)({},p,n,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("h1",{id:"presentation"},"Presentation"),(0,i.kt)("p",null,"Aside from exporting your animations, you can use Motion Canvas to present them\nin real time. Simply define some slides in your animation and then navigate\nbetween them using the Presentation Mode."),(0,i.kt)("h2",{id:"beginslide-function"},(0,i.kt)("inlineCode",{parentName:"h2"},"beginSlide")," function"),(0,i.kt)("p",null,"The ",(0,i.kt)("a",{parentName:"p",href:"/api/core/utils#beginSlide"},(0,i.kt)("inlineCode",{parentName:"a"},"beginSlide"))," function is used to mark the\nbeginning of a new slide. When this function is yielded, the playback will pause\nand wait for you to press ",(0,i.kt)("inlineCode",{parentName:"p"},"SPACE"),":"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"import {makeScene2D} from '@motion-canvas/2d/lib/scenes';\nimport {Txt} from '@motion-canvas/2d/lib/components';\nimport {beginSlide, createRef} from '@motion-canvas/core/lib/utils';\nimport {waitFor} from '@motion-canvas/core/lib/flow';\n\nexport default makeScene2D(function* (view) {\n  const title = createRef<Txt>();\n  view.add(<Txt ref={title} />);\n\n  title().text('FIRST SLIDE');\n  yield* beginSlide('first slide');\n  yield* waitFor(1); // try doing some actual animations here\n\n  title().text('SECOND SLIDE');\n  yield* beginSlide('second slide');\n  yield* waitFor(1);\n\n  title().text('LAST SLIDE');\n  yield* beginSlide('last slide');\n  yield* waitFor(1);\n});\n")),(0,i.kt)("h2",{id:"presentation-mode"},"Presentation Mode"),(0,i.kt)("p",null,"To present your animation, navigate to the Video Settings ",(0,i.kt)(r.A,{className:"icon-inline",alt:"Video Settings",title:"Video Settings",mdxType:"VideoSettings"})," tab. Click on the dropdown next to the ",(0,i.kt)("inlineCode",{parentName:"p"},"RENDER")," button and choose ",(0,i.kt)("inlineCode",{parentName:"p"},"PRESENT"),".\nFrom now on, pressing the button will enter the Presentation Mode (You can\nswitch back to rendering at any time using the same dropdown). Try entering the\nPresentation Mode in ",(0,i.kt)("a",{href:"/editor/presentation/",target:"_blank"},"our online\neditor"),"."),(0,i.kt)("p",null,"In this mode, you can quickly switch between all your slides using the panel on\nthe left. You can also use the playback controls at the bottom to navigate from\none slide to another. Hover over the buttons to see what they do and what\nkeyboard shortcuts are assigned to them. When switching to full screen, the\ncontrols disappear, but you can still use your keyboard to navigate."))}u.isMDXComponent=!0}}]);