https://motioncanvas.io/assets/js/e3725a3f.27f48f0b.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([[3555],{876:(e,t,n)=>{n.d(t,{Zo:()=>p,kt:()=>b});var r=n(2784);function a(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 r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}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){a(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 c(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var s=r.createContext({}),l=function(e){var t=r.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},p=function(e){var t=l(e.components);return r.createElement(s.Provider,{value:t},e.children)},u="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},m=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,s=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),u=l(n),m=a,b=u["".concat(s,".").concat(m)]||u[m]||d[m]||o;return n?r.createElement(b,i(i({ref:t},p),{},{components:n})):r.createElement(b,i({ref:t},p))}));function b(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,i=new Array(o);i[0]=m;var c={};for(var s in t)hasOwnProperty.call(t,s)&&(c[s]=t[s]);c.originalType=e,c[u]="string"==typeof e?e:a,i[1]=c;for(var l=2;l<o;l++)i[l]=n[l];return r.createElement.apply(null,i)}return r.createElement.apply(null,n)}m.displayName="MDXCreateElement"},5825:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>s,contentTitle:()=>i,default:()=>u,frontMatter:()=>o,metadata:()=>c,toc:()=>l});var r=n(7896),a=(n(2784),n(876));const o={sidebar_position:2,slug:"/project-variables"},i="Project variables",c={unversionedId:"advanced/project-variables",id:"advanced/project-variables",title:"Project variables",description:"Making animations dynamic can be achieved using project variables. These could",source:"@site/docs/advanced/project-variables.mdx",sourceDirName:"advanced",slug:"/project-variables",permalink:"/docs/project-variables",draft:!1,editUrl:"http://web.archive.org/web/20230317133942/https://github.com/motion-canvas/motion-canvas/blob/main/packages/docs/docs/advanced/project-variables.mdx",tags:[],version:"current",lastUpdatedBy:"Jacob",sidebarPosition:2,frontMatter:{sidebar_position:2,slug:"/project-variables"},sidebar:"docs",previous:{title:"Custom font",permalink:"/docs/custom-font"},next:{title:"Random values",permalink:"/docs/random-values"}},s={},l=[],p={toc:l};

10function u(e){let{components:t,...n}=e;return(0,a.kt)("wrapper",(0,r.Z)({},p,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"project-variables"},"Project variables"),(0,a.kt)("p",null,"Making animations dynamic can be achieved using project variables. These could\nbe used for light/dark themes, changing Node styling or editing text content.\nProject variables make use of signals - allowing variables to be updated during\nanimations."),(0,a.kt)("p",null,"Adding variables via the player component can be done by passing a stringified\njson object to the variables attribute:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-html"},'<motion-canvas-player\n  src="/path/to/project.js"\n  variables=\'{"circleFill":"red"}\'\n></motion-canvas-player>\n')),(0,a.kt)("p",null,"They can also be added using makeProject():"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-ts"},"export default makeProject({\n  scenes: [example],\n  background: '#141414',\n  variables: {circleFill: 'red'},\n});\n")),(0,a.kt)("p",null,"Accessing the variables inside of a scene is through\n",(0,a.kt)("a",{parentName:"p",href:"/api/core/utils#useScene"},(0,a.kt)("inlineCode",{parentName:"a"},"useScene()")),":"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-ts"},"const circleFill = useScene().variables.get('circleFill');\n")))}u.isMDXComponent=!0}}]);