https://motioncanvas.io/assets/js/077edb50.0391096c.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([[6235],{876:(e,t,n)=>{n.d(t,{Zo:()=>d,kt:()=>g});var a=n(2784);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},o=Object.keys(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var c=a.createContext({}),p=function(e){var t=a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},d=function(e){var t=p(e.components);return a.createElement(c.Provider,{value:t},e.children)},m="mdxType",s={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},u=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,c=e.parentName,d=l(e,["components","mdxType","originalType","parentName"]),m=p(n),u=r,g=m["".concat(c,".").concat(u)]||m[u]||s[u]||o;return n?a.createElement(g,i(i({ref:t},d),{},{components:n})):a.createElement(g,i({ref:t},d))}));function g(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=u;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l[m]="string"==typeof e?e:r,i[1]=l;for(var p=2;p<o;p++)i[p]=n[p];return a.createElement.apply(null,i)}return a.createElement.apply(null,n)}u.displayName="MDXCreateElement"},63:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>m,frontMatter:()=>o,metadata:()=>l,toc:()=>p});var a=n(7896),r=(n(2784),n(876));const o={title:"Version 3",slug:"/migrating-to-3.0.0"},i="Migrating to v3",l={unversionedId:"migration/3.0.0",id:"migration/3.0.0",title:"Version 3",description:"Installation",source:"@site/docs/migration/3.0.0.mdx",sourceDirName:"migration",slug:"/migrating-to-3.0.0",permalink:"/docs/migrating-to-3.0.0",draft:!1,editUrl:"http://web.archive.org/web/20230317133943/https://github.com/motion-canvas/motion-canvas/blob/main/packages/docs/docs/migration/3.0.0.mdx",tags:[],version:"current",lastUpdatedBy:"Jacob",frontMatter:{title:"Version 3",slug:"/migrating-to-3.0.0"},sidebar:"docs",previous:{title:"Update Guide",permalink:"/docs/updating"}},c={},p=[{value:"Installation",id:"installation",level:2},{value:"Name changes",id:"name-changes",level:2},{value:"Project configuration",id:"project-configuration",level:2},{value:"<code>CodeBlock</code> revert",id:"codeblock-revert",level:2}],d={toc:p};

10function m(e){let{components:t,...n}=e;return(0,r.kt)("wrapper",(0,a.Z)({},d,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",{id:"migrating-to-v3"},"Migrating to v3"),(0,r.kt)("h2",{id:"installation"},"Installation"),(0,r.kt)("p",null,"Update all ",(0,r.kt)("inlineCode",{parentName:"p"},"@motion-canvas")," packages to version ",(0,r.kt)("inlineCode",{parentName:"p"},"3.x.x")," by running:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-bash"},"npm install --save @motion-canvas/2d@3 @motion-canvas/core@3 @motion-canvas/ui@3 @motion-canvas/vite-plugin@3\n")),(0,r.kt)("h2",{id:"name-changes"},"Name changes"),(0,r.kt)("p",null,"This version introduces multiple name changes that are meant to make the code\nmore readable and less prone to collisions with already existing types. Make\nsure to replace the following names in your codebase:"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:null},"Old name"),(0,r.kt)("th",{parentName:"tr",align:null},"New name"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"Image")),(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("a",{parentName:"td",href:"/api/2d/components/Img"},(0,r.kt)("inlineCode",{parentName:"a"},"Img")))),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"Text")),(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("a",{parentName:"td",href:"/api/2d/components/Txt"},(0,r.kt)("inlineCode",{parentName:"a"},"Txt")))),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"Rect")," (the type, not the node)"),(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("a",{parentName:"td",href:"/api/core/types/BBox"},(0,r.kt)("inlineCode",{parentName:"a"},"BBox")))),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"Node.getCacheRect")),(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("a",{parentName:"td",href:"/api/2d/components/Node#getCacheBBox"},(0,r.kt)("inlineCode",{parentName:"a"},"Node.getCacheBBox")))),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"Node.cacheRect")),(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("a",{parentName:"td",href:"/api/2d/components/Node#cacheBBox"},(0,r.kt)("inlineCode",{parentName:"a"},"Node.cacheBBox")))),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"Node.fullCacheRect")),(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("a",{parentName:"td",href:"/api/2d/components/Node#fullCacheBBox"},(0,r.kt)("inlineCode",{parentName:"a"},"Node.fullCacheBBox")))),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"CodeBlock.selectionOpacity")),(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("a",{parentName:"td",href:"/api/2d/components/CodeBlock#unselectedOpacity"},(0,r.kt)("inlineCode",{parentName:"a"},"CodeBlock.unselectedOpacity")))))),(0,r.kt)("h2",{id:"project-configuration"},"Project configuration"),(0,r.kt)("p",null,"Most project settings are now configured via the editor and stored in the meta\nfile. After running your project for the first time, the meta file will be\nautomatically updated to contain these new settings."),(0,r.kt)("p",null,"You can transfer your configuration from the project file:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-ts",metastring:'title="src/project.ts"',title:'"src/project.ts"'},"import {makeProject} from '@motion-canvas/core';\n\nimport example from './scenes/example?scene';\n\nexport default makeProject({\n  scenes: [example],\n  // highlight-start\n  background: '#141414',\n  audioOffset: 2,\n  // highlight-end\n});\n")),(0,r.kt)("p",null,"Over to the meta file:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-json",metastring:'title="src/project.meta"',title:'"src/project.meta"'},'{\n  "version": 1,\n  "shared": {\n    // highlight-next-line\n    "background": "rgb(20,20,20)",\n    "range": [0, null],\n    "size": {\n      "x": 1920,\n      "y": 1080\n    },\n    // highlight-next-line\n    "audioOffset": 2\n  },\n  "preview": {\n    "fps": 30,\n    "resolutionScale": 1\n  },\n  "rendering": {\n    "fps": 30,\n    "resolutionScale": 1,\n    "colorSpace": "srgb",\n    "fileType": "image/png",\n    "quality": 1\n  }\n}\n')),(0,r.kt)("h2",{id:"codeblock-revert"},(0,r.kt)("inlineCode",{parentName:"h2"},"CodeBlock")," revert"),(0,r.kt)("p",null,"Due to technical issues,\n",(0,r.kt)("a",{parentName:"p",href:"http://web.archive.org/web/20230317133943/https://github.com/motion-canvas/motion-canvas/pull/401"},"PR #401")," has been\nreverted."),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"The ",(0,r.kt)("a",{parentName:"li",href:"/docs/code-block"},(0,r.kt)("inlineCode",{parentName:"a"},"CodeBlock"))," should be imported using the full path\nagain:",(0,r.kt)("pre",{parentName:"li"},(0,r.kt)("code",{parentName:"pre",className:"language-ts"},"import {CodeBlock} from '@motion-canvas/2d/lib/components/CodeBlock';\n"))),(0,r.kt)("li",{parentName:"ul"},"The ",(0,r.kt)("inlineCode",{parentName:"li"},"stockTheme")," property is not supported for the time being.")),(0,r.kt)("p",null,"Please stay tuned as we try to find a better solution."))}m.isMDXComponent=!0}}]);