https://motioncanvas.io/assets/js/3abe25c6.879a3d47.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([[9699],{876:(e,n,t)=>{t.d(n,{Zo:()=>m,kt:()=>f});var o=t(2784);function r(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function a(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);n&&(o=o.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,o)}return t}function i(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?a(Object(t),!0).forEach((function(n){r(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):a(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function c(e,n){if(null==e)return{};var t,o,r=function(e,n){if(null==e)return{};var t,o,r={},a=Object.keys(e);for(o=0;o<a.length;o++)t=a[o],n.indexOf(t)>=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o<a.length;o++)t=a[o],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}var s=o.createContext({}),l=function(e){var n=o.useContext(s),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},m=function(e){var n=l(e.components);return o.createElement(s.Provider,{value:n},e.children)},p="mdxType",d={inlineCode:"code",wrapper:function(e){var n=e.children;return o.createElement(o.Fragment,{},n)}},u=o.forwardRef((function(e,n){var t=e.components,r=e.mdxType,a=e.originalType,s=e.parentName,m=c(e,["components","mdxType","originalType","parentName"]),p=l(t),u=r,f=p["".concat(s,".").concat(u)]||p[u]||d[u]||a;return t?o.createElement(f,i(i({ref:n},m),{},{components:t})):o.createElement(f,i({ref:n},m))}));function f(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var a=t.length,i=new Array(a);i[0]=u;var c={};for(var s in n)hasOwnProperty.call(n,s)&&(c[s]=n[s]);c.originalType=e,c[p]="string"==typeof e?e:r,i[1]=c;for(var l=2;l<a;l++)i[l]=t[l];return o.createElement.apply(null,i)}return o.createElement.apply(null,t)}u.displayName="MDXCreateElement"},2665:(e,n,t)=>{t.d(n,{Z:()=>b});var o=t(2784);const r="container_lQCo",a="small_As57",i="banner_A4QS",c="player_tELG",s="link_BTzN",l="icon_wSGd";var m=t(7896);function p(e){let{width:n=24,height:t=24,...r}=e;return o.createElement("svg",(0,m.Z)({viewBox:"0 0 24 24",width:n,height:t,"aria-hidden":!0},r),o.createElement("path",{d:"M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z",fill:"currentColor"}))}var d=t(9817),u=t(6277);function f(e){let{name:n}=e;const t=`http://web.archive.org/web/20230317133404/https://github.com/motion-canvas/motion-canvas/blob/main/packages/examples/src/scenes/${n}.tsx`;return o.createElement(d.Z,{to:t,className:(0,u.Z)("padding--sm",s)},o.createElement("span",null,"View source code"),o.createElement(p,{className:l}))}function b(e){let{name:n,banner:t,small:s,link:l}=e;return o.createElement("div",{className:(0,u.Z)(r,t&&i,s&&a)},o.createElement("motion-canvas-player",{class:c,src:`/examples/${n}.js`,auto:t}),o.createElement(f,{name:l||n}))}t(1263).Z.canUseDOM&&Promise.all([t.e(5392),t.e(9106)]).then(t.bind(t,9106))},1910:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>m,contentTitle:()=>s,default:()=>u,frontMatter:()=>c,metadata:()=>l,toc:()=>p});var o=t(7896),r=(t(2784),t(876)),a=t(2665),i=t(8128);const c={sidebar_position:2,slug:"/nodes"},s="LaTeX",l={unversionedId:"components/nodes",id:"components/nodes",title:"LaTeX",description:"A note on tweening LaTeX",source:"@site/docs/components/nodes.mdx",sourceDirName:"components",slug:"/nodes",permalink:"/docs/nodes",draft:!1,editUrl:"http://web.archive.org/web/20230317133404/https://github.com/motion-canvas/motion-canvas/blob/main/packages/docs/docs/components/nodes.mdx",tags:[],version:"current",lastUpdatedBy:"Jacob",sidebarPosition:2,frontMatter:{

10sidebar_position:2,slug:"/nodes"},sidebar:"docs",previous:{title:"CodeBlock",permalink:"/docs/code-block"},next:{title:"Custom Components",permalink:"/docs/custom-components"}},m={},p=[{value:"A note on tweening LaTeX",id:"a-note-on-tweening-latex",level:2}],d={toc:p};function u(e){let{components:n,...t}=e;return(0,r.kt)("wrapper",(0,o.Z)({},d,t,{components:n,mdxType:"MDXLayout"}),(0,r.kt)("h1",{id:"latex"},"LaTeX"),(0,r.kt)(i.Z,{language:"tsx",mdxType:"CodeBlock"},"import {Latex} from '@motion-canvas/2d/lib/components';\nimport {makeScene2D} from '@motion-canvas/2d/lib/scenes';\nimport {waitFor} from '@motion-canvas/core/lib/flow';\nimport {createRef} from '@motion-canvas/core/lib/utils';\n\nexport default makeScene2D(function* (view) {\n  const tex = createRef<Latex>();\n  view.add(\n    <Latex\n      ref={tex}\n      tex=\"{\\color{white} x = \\sin \\left( \\frac{\\pi}{2} \\right)}\"\n      y={0}\n      width={400} // height and width can calculate based on each other\n    />,\n  );\n\n  yield* waitFor(2);\n  yield* tex().opacity(0, 1);\n  yield* waitFor(2);\n  yield* tex().opacity(1, 1);\n});\n"),(0,r.kt)(a.Z,{small:!0,name:"tex",mdxType:"AnimationPlayer"}),(0,r.kt)("h2",{id:"a-note-on-tweening-latex"},"A note on tweening LaTeX"),(0,r.kt)("p",null,"Because we use a canvas renderer, we're rendering the LaTeX to an image instead\nusing a full graphics backend to render the TeX. This means that for all intents\nand purposes, LaTeX should be treated as if it were an image rather than more\nflexible TeX rendering like you may see in other software."),(0,r.kt)("p",null,"In other words, opacity, position, size, etc. should be fine to tween, but we do\nnot recommend tweening the ",(0,r.kt)("inlineCode",{parentName:"p"},"tex")," signal."))}u.isMDXComponent=!0}}]);