Skip to main content

LaTeX

import {Latex, makeScene2D} from '@motion-canvas/2d';
import {createRef, waitFor} from '@motion-canvas/core';

export default makeScene2D(function* (view) {
const tex = createRef<Latex>();
view.add(
<Latex
ref={tex}
tex="{\color{white} x = \sin \left( \frac{\pi}{2} \right)}"
y={0}
width={400} // height and width can calculate based on each other
/>,
);

yield* waitFor(2);
yield* tex().opacity(0, 1);
yield* waitFor(2);
yield* tex().opacity(1, 1);
});

A note on tweening LaTeX

Because we use a canvas renderer, we're rendering the LaTeX to an image instead of using a full graphics backend to render the TeX. This means that for all intents and purposes, LaTeX should be treated as if it were an image rather than more flexible TeX rendering like you may see in other software.

In other words, opacity, position, size, etc. should be fine to tween, but we do not recommend tweening the tex signal.