Changing Object Sizes with Signals

You can use signals to change values in your animation over time. Below you can find a example that uses signals to change the size of a circle over time.

Press play to preview the animation


import {Circle, Txt, makeScene2D} from '@revideo/2d';
import {createSignal} from '@revideo/core';
 
export default makeScene2D('scene', function* (view) {
  const circleSize = createSignal(50); // initial size of 50
 
  yield view.add(
    <>
      <Circle fill={'green'} size={circleSize} />
      <Txt fontSize={40} x={-300}>
        {() => `size: ${circleSize().toFixed(1)}`}
      </Txt>
    </>,
  );
 
  yield* circleSize(200, 2); // change size to 200 over two seconds
});