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.