How to change opacity of LaTeX equation selected fragments

[Hoinkas]

Hi!

I am new to motion-canvas and I wanted to create an animation showing which part of the code is responsible for which part of the equation. On the LaTeX Motion Canvas doc I read that

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

But I am not sure what does tweening the tex signal means. Is it a warning about not changing the equation string inside the LaTeX object?

I tried a different approach to changing the opacity of a selected part of the equation and got a solution where I deleted the LaTeX object node from the hierarchy and add new LaTeX node with changed properties.
It's quite effective, but there is a delay between highlighting the code part and changing the LaTeX object to a new one. I wanted both things to happen simultaneously.
Also, I don't want to create a new LaTeX object every time because it is not good coding practice.

Furthermore, I tried to move tex().remove() and rect().add inside yield* all(...) but got an error.

Argument of type 'Latex' is not assignable to parameter of type 'ThreadGenerator'.
  Type 'Latex' is missing the following properties from type 'Generator<void | ThreadGenerator | Promise<any> | Promisable<any>, void, any>': next, return, throw

Not sure what does that mean.

How should I do it? Is there any possibility, or should I abandon the idea of changing the LaTeX object?

My code below includes the solution for adding and removing nodes with LaTeX object.

export default makeScene2D(function* (view) {
  const code = createRef<CodeBlock>();
  const tex = createRef<Latex>();
  const text = createRef<Txt>();
  const rect = createRef<Rect>();
  view.fill('#141414');

  const python_code = `def ln(ln_base, ln_num):
  #Return NaN for non-positive values
  if ln_base <= 0:
      return float('nan')
  
  result = 0.0

  for i in range(1, ln_num + 1):
      coefficient = (-1) ** (i - 1) / i
      result += coefficient * (ln_base - 1) ** i

  return result`
  const txt = 'Taylor series for ln(x)';

  view.add(
    <Rect
      x={1920/4 + 100}
    >
      <Txt
        ref={text}
        fontSize={32}
        fontFamily={'JetBrains Mono'}
        text={txt}
        fill={'#f0f0f0'}
        y={-120}
      />
      <Rect
        ref={rect}
      >
        <Latex
          ref={tex}
          width={650}
          tex="{\color{white} 
          ln\left(x\right) = \sum_{n=1}^{\infty} (-1)^{n-1} \frac{(x - 1)^{n}}{n}\
          }"
        />,
      </Rect>
    </Rect>);

  view.add(
    <CodeBlock
      language='python'
      ref={code}
      fontSize={40}
      width={1920/2}
      x={-1920/5}
      y={30}

      fontFamily={'JetBrains Mono'}
      code={() => python_code}
    />
  );

  yield* all (
    waitFor(2),
    tex().opacity(0.2, 0.2),
    text().opacity(0.2, 0.2),
    code().opacity(0.2, 0.2),
  );

  tex().remove();
  const newLatex = <Latex
    ref={tex}
    width={650}
    tex="{\color{white} 
    ln\left(x\right)\color{#35383C} = \sum_{n=1}^{\infty} (-1)^{n-1} \frac{(x - 1)^{n}}{n}\
    }"
  />
  rect().add(newLatex);

  yield* all (
    waitFor(2),
    code().opacity(1, 0.2),
    code().selection(lines(0), 0.2),
  );

  newLatex.remove();
  const newLatex2 = <Latex
    ref={tex}
    width={650}
    tex="{\color{#35383C}
    ln\left(x\right) = \color{white} \sum_{n=1}^{\infty} \color{#35383C}(-1)^{n-1} \frac{(x - 1)^{n}}{n}\
    }"
  />
  rect().add(newLatex2);

  
  yield* all (
    waitFor(2),
    code().selection(lines(7), 0.2),
    waitFor(2),
  );
});