Motion Canvas

https://motioncanvas.io/docs
Admin
Motion Canvas is a TypeScript library and editor for creating informative vector animations...
Tokens:38,896
Snippets:580
Trust Score:7.4
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install project dependencies

Source: https://motioncanvas.io/docs/quickstart

Install the necessary packages in the newly created project directory.

```bash
                            
                              
                                npm
                                
                                install
                                  

                              
                            
                          
```

--------------------------------

### Start the development editor

Source: https://motioncanvas.io/docs/quickstart

Launch the local development server to preview animations at http://localhost:9000/.

```bash
                            
                              
                                npm
                                 run serve
                                  

                              
                            
                          
```

--------------------------------

### Project Initialization Commands

Source: https://motioncanvas.io/docs/quickstart

Commands to navigate to, install, and serve a newly bootstrapped Motion Canvas project.

```bash
                                  
                                    
                                      cd
                                      
                                      [
                                      path
                                      ]
                                      
                                        

                                    
                                    
                                      
                                      npm
                                      
                                      install
                                      
                                        

                                    
                                    
                                      
                                      npm
                                       run serve
                                        

                                    
                                  
                                
```

--------------------------------

### Including a file from another package

Source: https://motioncanvas.io/docs/shaders

Example of including a file from an external package.

```glsl
#include "@motion-canvas/core/shaders/common.glsl"
```

--------------------------------

### Including a relative file

Source: https://motioncanvas.io/docs/shaders

Example of including a file using a relative path.

```glsl
#include "../utils/math.glsl"
```

--------------------------------

### CodeBlock Content Example

Source: https://motioncanvas.io/docs/code-block

A raw example of code content showing how relative indentation is preserved.

```javascript
                            
                              
                                
                                console
                                .
                                log
                                (
                                'Hello World!'
                                )
                                ;
                                
                                  

                              
                              
                                
                                // less indented
                                
                                  

                              
                              
                                
                                // more indented
                                  

                              
                            
                          
```

--------------------------------

### Code State Transition Example

Source: https://motioncanvas.io/docs/code-block

A visual representation of the code state before and after an animation transition.

```javascript
                                var
                                 myBool 
                                =
                                
                                true
                                ;
                                
                                  

                              
                              
                                
                                // will animate to
                                
                                  

                              
                              
                                
                                var
                                 myBool 
                                =
                                
                                false
                                ;
```

--------------------------------

### Configure project settings in project.ts

Source: https://motioncanvas.io/docs/migrating-to-3.0.0

Example of the project configuration structure in src/project.ts before migrating settings to the meta file.

```typescript
import {makeProject} from '@motion-canvas/core';

import example from './scenes/example?scene';

export default makeProject({
  scenes: [example],
  background: '#141414',
  audioOffset: 2,
});
```

--------------------------------

### Check Node.js version

Source: https://motioncanvas.io/docs/quickstart

Verify that Node.js version 16 or greater is installed on your machine.

```bash
                                
                                  
                                    node
                                     -v
                                      

                                  
                                
                              
```

--------------------------------

### sequence(delay, ...tasks)

Source: https://motioncanvas.io/docs/flow

Starts a series of tasks one after another with a constant delay between them. The function does not wait for the previous task to finish before starting the next one.

```APIDOC
## sequence(delay, ...tasks)

### Description
Starts all tasks one after another with a constant delay between them. The function does not wait until the previous task in the sequence has finished; once the delay has passed, the next task will start even if the previous is still running.

### Parameters
- **delay** (number) - The delay between each of the tasks.
- **...tasks** (ThreadGenerator[]) - A list of tasks to be run in a sequence.

### Returns
- **ThreadGenerator**
```

--------------------------------

### Install Motion Canvas v3 dependencies

Source: https://motioncanvas.io/docs/migrating-to-3.0.0

Run this command to update all core Motion Canvas packages to the 3.x.x version.

```bash
npm install --save @motion-canvas/2d@3 @motion-canvas/core@3 @motion-canvas/ui@3 @motion-canvas/vite-plugin@3
```

--------------------------------

### Masking and composite layout example

Source: https://motioncanvas.io/docs/filters-and-effects

A layout configuration demonstrating the use of Grid and Txt components for masking.

```jsx
<Layout gap={5} alignItems={'center'}>
  <Grid
    stroke={'white'}
    width={18}
    height={18}
    spacing={5}
    lineWidth={1}
  />
  <Txt fill={'white'}>
    Hidden Stencil / Mask Layer
  </Txt>
</Layout>
<Layout gap={5} alignItems={'center'}>
```

--------------------------------

### Apply Txt component with fill and position

Source: https://motioncanvas.io/docs/filters-and-effects

Examples of configuring Txt components with specific fill colors and coordinate positions.

```tsx
<Txt fill={'white'} text={'contrast'} y={115} fill={'#aff'} />
```

```tsx
<Txt fill={'white'} text={'1'} position={[-115, 100]} />
```

```tsx
<Txt fill={'white'} text={'1'} position={[-100, 115]} />
```

--------------------------------

### Manual Reference Object Creation

Source: https://motioncanvas.io/docs/references

An example of manually defining a reference object for a component.

```typescript
const label = { rect: null as Rect, text: null as Text };

view.add(<Label refs={label}>HELLO</Label>);
```

--------------------------------

### Applying Filters and Effects in a Scene

Source: https://motioncanvas.io/docs/filters-and-effects

Demonstrates the setup of a scene with signals for controlling filter values like saturation.

```typescript
import ...

export default makeScene2D(function* (view) {

  view.fontFamily('monospace').fontSize(20).fill('#141414');

  view.add(<Rect size={5000} fill={'#111'} />);

  const t = createSignal(0);

  const saturateValue = createSignal(1);
```

--------------------------------

### Define a Custom Switch Component

Source: https://motioncanvas.io/docs/custom-components

This snippet demonstrates the initial setup for a custom Switch component, including the interface for props and the class definition extending Node.

```typescript
import { SignalValue } from '@motion-canvas/core/lib/signals';
import { createRef } from '@motion-canvas/core/lib/utils';
import { all } from '@motion-canvas/core/lib/flow';

export interface SwitchProps extends NodeProps {
  initialState?: SignalValue<boolean>;
  accent?: SignalValue<PossibleColor>;
}

export class Switch extends Node {
  @initial(false)
  @signal()

```

--------------------------------

### Define a custom Switch component

Source: https://motioncanvas.io/docs/custom-components

Example of extending the Node class and initializing properties within a custom constructor.

```typescript
export class Switch extends Node {
  public constructor(props?: SwitchProps) {
    super({
      // If you wanted to ensure that layout was always
      // true for this component, you could add it here
      // as such:
      // layout: true
      ...props,
    });
    // ...
  }
}
```

--------------------------------

### Define a Circle Node

Source: https://motioncanvas.io/docs/quickstart

Example of defining a Circle node with a reference and initial properties.

```tsx
<Circle ref={myCircle} x={-300} width={240} height={240} fill="#e13238" />
```

--------------------------------

### Creating a basic tween

Source: https://motioncanvas.io/docs/tweening

Demonstrates the basic setup for using the tween function within a Motion Canvas scene.

```typescript
import { makeScene2D } from '@motion-canvas/2d/lib/scenes';
import { Circle } from '@motion-canvas/2d/lib/components';
import { createRef } from '@motion-canvas/core/lib/utils';
import { tween, map } from '@motion-canvas/core/lib/tweening';

export default makeScene2D(function* (view) {
  const circle = createRef<Circle>();

  view.add(
    <Circle
      ref={circle}
```

--------------------------------

### Profile code execution with Logger

Source: https://motioncanvas.io/docs/logging

Use the same identifier string to wrap the code block you wish to measure. The first call starts the timer, and the second call ends it.

```javascript
                                logger
                                .
                                profile
                                (
                                'id'
                                )
                                ;
                                
                                // <-- starts the profiling
                                
                                  

                              
                              
                                
                                // some expensive calculation
                                
                                  

                              
                              
                                logger
                                .
                                profile
                                (
                                'id'
                                )
                                ;
                                
                                // <-- ends the profiling
```

--------------------------------

### Complex Signal Animation Example

Source: https://motioncanvas.io/docs/signals

Demonstrates binding signals to component properties and using yield for animation sequences.

```typescript
text = { () => `A = ${area().toFixed(2)}` }
y = { () => radius() * scale }
fill = { '#e13238' }
{ ...textStyle }
/>
>,
);
yield * radius(4, 2).to(3, 2);
yield * waitFor(1);
});
```

--------------------------------

### Define GLSL Uniforms

Source: https://motioncanvas.io/docs/shaders

Example of declaring uniform variables within a GLSL shader file.

```glsl
uniform float myFloat;
uniform vec2 myVec2;
uniform vec4 myColor;
```

--------------------------------

### Manipulate absolute position using matrices

Source: https://motioncanvas.io/docs/positioning

Demonstrates how to get and set absolute position using localToWorld and worldToParent matrices.

```typescript
// getting the absolute position:
node.absolutePosition();

// same as:
Vector2.zero.transformAsPoint(node.localToWorld());

// setting the absolute position:
node.absolutePosition(vector);

// same as:
node.position(vector.transformAsPoint(node.worldToParent()));
```

--------------------------------

### Perform a slide transition in a scene

Source: https://motioncanvas.io/docs/transitions

Use yield* with a transition generator like slideTransition at the start of a scene. Ensure all nodes are added to the view before yielding the transition.

```tsx
export default makeScene2D(function* (view) {
  // set up the scene:
  view.add(/* your nodes here */);

  // perform a slide transition to the left:
  yield* slideTransition(Direction.Left);

  // proceed with the animation
  yield* waitFor(3);
});
```

--------------------------------

### Setting up image animation with references

Source: https://motioncanvas.io/docs/media

Prepare for image animation by importing createRef and all from the core library.

```typescript
// ...
import {createRef} from '@motion-canvas/core/lib/utils';
import {all} from '@motion-canvas/core/lib/flow';
```

--------------------------------

### Using the #include directive

Source: https://motioncanvas.io/docs/shaders

Basic syntax for including a GLSL file using the preprocessor.

```glsl
#include "path-to-file"
```

--------------------------------

### Scaffold a new project

Source: https://motioncanvas.io/docs/quickstart

Initialize a new Motion Canvas project using the scaffolding tool.

```bash
                            
                              
                                npm
                                 init @motion-canvas@latest
                                  

                              
                            
                          
```

--------------------------------

### Defining and using makeRefs

Source: https://motioncanvas.io/docs/references

Shows how to define a component using makeRefs and how to instantiate it with a specific type.

```typescript
refs : { rect : Rect ; text : Txt } ; children : string ; } ) { return ( <Rect ref={makeRef(refs, 'rect')}> <Txt ref={makeRef(refs, 'text')}> {children} </Txt> </Rect> ) ; }
```

```typescript
const label = makeRefs<typeof Label>();
```

--------------------------------

### Execute Motion Canvas create command

Source: https://motioncanvas.io/docs/quickstart

Use this alternative command if the standard initialization fails due to npm version issues.

```bash
                                  
                                    
                                      npm
                                      
                                      exec
                                       @motion-canvas/create@latest
                                        

                                    
                                  
                                
```

--------------------------------

### Define project meta configuration

Source: https://motioncanvas.io/docs/migrating-to-3.0.0

Initial structure for the project meta file located at src/project.meta.

```json
{
  "version": 1
}
```

--------------------------------

### Retrieve signal value

Source: https://motioncanvas.io/docs/signals

Invokes the signal without arguments to get its current value.

```typescript
const value = signal();
```

--------------------------------

### Configuring audio in ProjectConfiguration

Source: https://motioncanvas.io/docs/media

Register the imported audio file within the makeProject configuration object.

```typescript
export default makeProject({
  // ...
  audio: audio,
});
```

--------------------------------

### Hard-coded animation synchronization

Source: https://motioncanvas.io/docs/time-events

An example of using hard-coded wait times to synchronize animations, which can be tedious to maintain.

```typescript
yield* animationOne();
yield* waitFor(3.1415);
// but how long should we wait?
yield* animationTwo();
```

--------------------------------

### Initialize and Select Lines in CodeBlock

Source: https://motioncanvas.io/docs/code-block

Create a reference to a CodeBlock and use the selection method to highlight specific lines or ranges of lines.

```typescript
const codeRef = createRef();

yield view.add(
  <CodeBlock
    ref={codeRef}
    code={`
      // first line
      // second line
      // third line
    `}
  />,
);

// second line only
yield * codeRef().selection(lines(1));

// second and third line (line 1 to line 2)
yield * codeRef().selection(lines(1, 2));
```

--------------------------------

### Apply Masking and Opacity Transitions

Source: https://motioncanvas.io/docs/filters-and-effects

Demonstrates setting mask and value positions followed by opacity animations using the all generator.

```typescript
maskPosition(new Vector2(-150, -30), 2),
valuePosition(new Vector2(150, -30), 2),
);
yield* all(
fakeMaskLayerGroup().opacity(0, 1),
fakeValueLayerGroup().opacity(0, 1),
);
// Hidden Loop
yield* all(
```

--------------------------------

### Initialize a Circle with a reference

Source: https://motioncanvas.io/docs/tweening

Sets up a Circle element with a specific size, position, and color, assigned to a reference for later manipulation.

```typescript
import { createRef } from '@motion-canvas/core/lib/utils';
import { all } from '@motion-canvas/core/lib/flow';

export default makeScene2D(function* (view) {
  const circle = createRef<Circle>();

  view.add(
    <Circle
      ref={circle}
      size={150}
      position={[-300, -300]}
      fill={'#e13238'}
    />,
  );
```

--------------------------------

### Adding an audio offset

Source: https://motioncanvas.io/docs/media

Use the audioOffset property to delay the start of the audio track by a specified number of seconds.

```typescript
export default makeProject({
  // ...
  audio: audio,
  audioOffset: 1.5, // delays the audio by 1.5 second
});
```

--------------------------------

### Get world-to-local matrix

Source: https://motioncanvas.io/docs/positioning

Retrieves the matrix that transforms vectors from world space to the node's local space.

```typescript
public worldToLocal(): DOMMatrix
```

--------------------------------

### Initialize and display a CodeBlock

Source: https://motioncanvas.io/docs/code-block

Import the CodeBlock component and add it to the view using the code and language properties.

```tsx
import { CodeBlock } from '@motion-canvas/2d/lib/components/CodeBlock';

yield view.add(
  <CodeBlock language="c#" code={`Console.WriteLine("Hello World!")`} />
);
```

--------------------------------

### Get local-to-world matrix

Source: https://motioncanvas.io/docs/positioning

Retrieves the matrix that transforms vectors from the node's local space to world space.

```typescript
public localToWorld(): DOMMatrix
```

--------------------------------

### Configure project with a Node.js plugin

Source: https://motioncanvas.io/docs/plugins

Register a plugin in the project configuration using the plugins array. Ensure the plugin entry point is correctly resolved relative to the project file.

```typescript
import {makeProject} from '@motion-canvas/core';

import myPlugin from './plugin';

import example from './scenes/example?scene';

export default makeProject({
  scenes: [example],
  plugins: [myPlugin()],
});
```

--------------------------------

### Project configuration structure

Source: https://motioncanvas.io/docs/migrating-to-3.0.0

Defines the JSON structure for project settings including background, resolution, and rendering frame rates.

```json
{
  "shared": {
    "background": "rgb(20,20,20)",
    "range": [0, null],
    "size": {
      "x": 1920,
      "y": 1080
    },
    "audioOffset": 2
  },
  "preview": {
    "fps": 30,
    "resolutionScale": 1
  },
  "rendering": {
    "fps": 30
  }
}
```

--------------------------------

### Creating a Video Reference

Source: https://motioncanvas.io/docs/media

Use createRef to manage a Video element, allowing for programmatic control within a scene.

```typescript
import { createRef } from '@motion-canvas/core/lib/utils';

export default makeScene2D(function* (view) {
  const videoRef = createRef<Video>();

  view.add(<Video ref={videoRef} src={exampleMp4} />);
});
```

--------------------------------

### Define slides with beginSlide

Source: https://motioncanvas.io/docs/presentation

Use beginSlide to mark the start of a new slide, causing the animation to pause until the SPACE key is pressed.

```typescript
import
                                
                                {
                                makeScene2D
                                }
                                
                                from
                                
                                '@motion-canvas/2d/lib/scenes'
                                ;
                                
                                  

                              
                              
                                
                                import
                                
                                {
                                Txt
                                }
                                
                                from
                                
                                '@motion-canvas/2d/lib/components'
                                ;
                                
                                  

                              
                              
                                
                                import
                                
                                {
                                beginSlide
                                ,
                                 createRef
                                }
                                
                                from
                                
                                '@motion-canvas/core/lib/utils'
                                ;
                                
                                  

                              
                              
                                
                                import
                                
                                {
                                waitFor
                                }
                                
                                from
                                
                                '@motion-canvas/core/lib/flow'
                                ;
                                
                                  

                              
                              
                                
                                  

                              
                              
                                
                                export
                                
                                default
                                
                                makeScene2D
                                (
                                function
                                *
                                
                                (
                                view
                                )
                                
                                {
                                
                                  

                              
                              
                                
                                const
                                 title 
                                =
                                
                                createRef
                                <
                                Txt
                                >
                                (
                                )
                                ;
                                
                                  

                              
                              
                                  view
                                .
                                add
                                (
                                <
                                Txt ref
                                =
                                {
                                title
                                }
                                
                                /
                                >
                                )
                                ;
                                
                                  

                              
                              
                                
                                  
```

--------------------------------

### Get local-to-parent matrix

Source: https://motioncanvas.io/docs/positioning

Retrieves the matrix that transforms vectors from the node's local space to its parent's local space.

```typescript
public localToParent(): DOMMatrix
```

--------------------------------

### Define scene with image source

Source: https://motioncanvas.io/docs/filters-and-effects

Sets up a basic scene using makeScene2D and defines an image source URL.

```typescript
import ...

const ImageSource = 'https://images.unsplash.com/photo-1685901088371-f498db7f8c46';

export default makeScene2D(function* (view) {
  view.fontSize(20).fill('#141414');
```

--------------------------------

### Define CodeBlock Selection with Array Literals

Source: https://motioncanvas.io/docs/code-block

Uses a two-dimensional array to specify the start and end positions of a selection within the code block.

```typescript
yield
view
.add(
<CodeBlock
code={
`
var myBool;
`
}
selection={
[
[0, 4],
[0, 10],
]
}
/>
);
```

--------------------------------

### Project Directory Structure

Source: https://motioncanvas.io/docs/custom-font

Shows the required placement of the global.css file within the src directory.

```text
                                root
                                  

                              
                              
                                └─src
                                  

                              
                              
                                
                                
                                 ├─scenes/
                                  

                              
                              
                                
                                
                                 ├─motion-canvas.d.ts
                                  

                              
                              
                                
                                
                                 ├─project.meta
                                  

                              
                              
                                
                                
                                 ├─project.ts
                                  

                              
                              
                                
                                +
                                 └─global.css
```

--------------------------------

### Project structure for transitions

Source: https://motioncanvas.io/docs/transitions

The directory structure required to implement transitions between two scenes.

```text
my-animation/

                                  
                                  
                                    └─ src/
                                      

                                  
                                  
                                       ├─ scenes/
                                      

                                  
                                  
                                       │  ├─ firstScene.tsx
                                      

                                  
                                  
                                       │  └─ secondScene.tsx
                                      

                                  
                                  
                                       └─ project.ts
```

--------------------------------

### Project structure for a Motion Canvas plugin

Source: https://motioncanvas.io/docs/plugins

The recommended file layout for a project containing a custom Vite plugin.

```text
project/
├── src/
│   ├── scenes/
│   │   └── example.tsx
│   ├── plugin.ts
│   └── project.ts
├── package.json
├── myVitePlugin.ts
└── vite.config.ts
```

--------------------------------

### Applying Text and Layout Components

Source: https://motioncanvas.io/docs/filters-and-effects

Demonstrates the basic structure for adding text with fill properties and nested layout components.

```tsx
<Txt fill={'#ffa'}>saturation</Txt>
<Layout>
<Layout>,
);
// Center Segment
view.add(
<Layout y={-10}>
<Grid size={200} stroke={'gray'} lineWidth={1} spacing={40} />
```

--------------------------------

### Constructing a Scene Hierarchy

Source: https://motioncanvas.io/docs/hierarchy

Demonstrates how to build a scene tree by adding nodes to the view using the add method.

```typescript
view
.add([
new Circle({}),
new Layout({
children: [
new Rect({}),
new Text({text: 'Hi'}),
],
}),
]);
```

--------------------------------

### Initialize Custom Component Structure

Source: https://motioncanvas.io/docs/custom-components

Defines the reference, constructor, and initial layout logic for a custom component.

```typescript
private readonly container = createRef<Rect>();

public constructor(props?: SwitchProps) {
  super({
    ...props,
  });

  this.isOn = this.initialState();
  this.indicatorPosition(this.isOn ? 50 : -50);

  this.add(
    <Rect
      ref={this.container}
```

--------------------------------

### makeRefs()

Source: https://motioncanvas.io/docs/references

Creates a reference container for components, enabling direct access to specific elements within a scene.

```APIDOC
## makeRefs()

### Description
Creates a reference object that can be used to store and access component instances within a Motion Canvas scene.

### Usage
```typescript
const refs = makeRefs<T>();
```

### Parameters
- **T** (Generic Type) - The type of the component or object structure being referenced.

### Returns
- **refs** (Object) - A container object that holds references to the specified components.
```

--------------------------------

### Configure multiple projects

Source: https://motioncanvas.io/docs/configuration

Define an array of project paths to enable a project selection screen in the editor.

```typescript
                                motionCanvas
                                (
                                {
                                
                                  

                              
                              
                                  project
                                :
                                
                                [
                                
                                  

                              
                              
                                
                                './src/firstProject.ts'
                                ,
                                
                                  

                              
                              
                                
                                './src/secondProject.ts'
                                ,
                                
                                  

                              
                              
                                
                                ]
                                ,
                                
                                  

                              
                              
                                
                                }
                                )
                                ;
```

--------------------------------

### Initialize a scene and add a circle

Source: https://motioncanvas.io/docs/quickstart

Uses makeScene2D to define the scene and adds a Circle with a reference and specific properties.

```typescript
export default makeScene2D(function* (view) {
  const myCircle = createRef<Circle>();

  view.add(
    <Circle
      ref={myCircle}
      x={-300}
      width={240}
      height={240}
      fill="#e13238"
    />,
  );

  yield* all(
```

--------------------------------

### Define a basic scene

Source: https://motioncanvas.io/docs/quickstart

Replace the contents of src/scenes/example.tsx with this boilerplate to begin defining animations.

```typescript
                            
                              
                                import
                                
                                {
                                makeScene2D
                                }
                                
                                from
                                
                                '@motion-canvas/2d/lib/scenes'
                                ;
                                
                                  

                              
                              
                                
                                import
                                
                                {
                                Circle
                                }
                                
                                from
                                
                                '@motion-canvas/2d/lib/components'
                                ;
                                
                                  

                              
                              
                                
                                import
                                
                                {
                                createRef
                                }
                                
                                from
                                
                                '@motion-canvas/core/lib/utils'
                                ;
                                
                                  

                              
                              
                                
                                import
                                
                                {
                                all
                                }
                                
                                from
                                
                                '@motion-canvas/core/lib/flow'
                                ;
                                
                                  

                              
                              
                                  

```

--------------------------------

### Importing a video file

Source: https://motioncanvas.io/docs/media

Use this import statement to bring a video file into your project. Ensure the file path is relative to your source file location.

```typescript
import exampleMp4 from '../../videos/example.mp4';
```

--------------------------------

### Applying Filters to Components

Source: https://motioncanvas.io/docs/filters-and-effects

Demonstrates the use of Img and Txt components with specific properties for visual styling.

```tsx
<Img src={'/img/logo_dark.svg'} size={200} x={-200} ref={iconRef} />

<Txt
  fill={'rgba(255, 255, 255, 0.6)'}
  fontSize={20}
  x={200}
  text={() => 'Current Filter: ' + currentEffectText()}
/>
```

--------------------------------

### Project Configuration Settings

Source: https://motioncanvas.io/docs/migrating-to-3.0.0

Defines the rendering configuration properties for a Motion Canvas project.

```json
"resolutionScale": 1,
"colorSpace": "srgb",
"fileType": "image/png",
"quality": 1
}
}
```

--------------------------------

### Instantiate a Custom Component

Source: https://motioncanvas.io/docs/custom-components

Add a custom component to the view by providing the necessary arguments.

```tsx
<Switch initialState={false} />
```

--------------------------------

### Animate code transformation

Source: https://motioncanvas.io/docs/code-block

Demonstrates the transition from a variable declaration to an initialized variable.

```javascript
                                var
                                 myBool
                                ;
                                
                                  

                              
                              
                                
                                // will animate to
                                
                                  

                              
                              
                                
                                var
                                 myBool 
                                =
                                
                                true
                                ;
```

--------------------------------

### Declare a Motion Canvas project

Source: https://motioncanvas.io/docs/quickstart

Defines the project entry point by importing scenes and exporting a makeProject configuration.

```typescript
import { makeProject } from '@motion-canvas/core';
import example from './scenes/example?scene';

export default makeProject({
  scenes: [example],
});
```

--------------------------------

### Apply Layout Filters

Source: https://motioncanvas.io/docs/filters-and-effects

Demonstrates the structure for applying filters like saturation and contrast within a layout container.

```tsx
<Layout direction={'row'} gap={20}>
  <Txt fill={'#ffa'}>saturation</Txt>
  <Txt fill={'#aff'}>constrast</Txt>
</Layout>,
);
// Right Segment
yield view.add(
```

--------------------------------

### Importing an audio file

Source: https://motioncanvas.io/docs/media

Import the audio file into your project.ts file using a relative path.

```typescript
import audio from '../audio/voice.mp3';
```

--------------------------------

### Initialize node references

Source: https://motioncanvas.io/docs/filters-and-effects

Creates references for the mask and value layer groups.

```typescript
const fakeMaskLayerGroup = createRef<Node>();
const fakeValueLayerGroup = createRef<Node>();
```

--------------------------------

### Importing CodeBlock

Source: https://motioncanvas.io/docs/migrating-to-3.0.0

Use the full path to import the CodeBlock component as required after the revert.

```typescript
                                
                                  
                                    import
                                    
                                    {
                                    CodeBlock
                                    }
                                    
                                    from
                                    
                                    '@motion-canvas/2d/lib/components/CodeBlock'
                                    ;
                                      

                                  
                                
                              
```

--------------------------------

### Define a runtime plugin

Source: https://motioncanvas.io/docs/plugins

Uses makePlugin to subscribe to player events and trigger actions like resetting or toggling playback.

```typescript
import { makePlugin } from '@motion-canvas/core';

export default makePlugin({
  name: 'motion-canvas-plugin-example',
  player(player) {
    player.onRecalculated.subscribe(() => {
      player.requestReset();
      player.togglePlayback(true);
    });
  },
});
```

--------------------------------

### Implementing a Custom Transition

Source: https://motioncanvas.io/docs/transitions

Uses context translation and animation yields to transition between scenes.

```typescript
ctx => ctx.translate(currentPosition.x(), currentPosition.y()),
// modify the context of the previous scene
ctx => ctx.translate(previousPosition.x(), previousPosition.y()),
);
// perform animations
yield* all(
previousPosition(position.scale(-1), duration),
currentPosition(Vector2.zero, duration),
);
// finish the transition
endTransition();
```

--------------------------------

### Simplify Range Mapping with Timing Functions

Source: https://motioncanvas.io/docs/tweening

Demonstrates how to pass range boundaries directly to a timing function as a shorthand for using the map function.

```typescript
// This:
map(-300, 300, easeInOutCubic(value));

// Can be simplified to:
easeInOutCubic(value, -300, 300);
```

--------------------------------

### Using makeRefs with Label component

Source: https://motioncanvas.io/docs/references

Demonstrates attaching a reference to a Label component using the makeRefs function.

```typescript
view
.add(
<Label
refs={label}>
HELLO
</Label>
);
```

--------------------------------

### Configure variables via makeProject

Source: https://motioncanvas.io/docs/project-variables

Define variables directly within the makeProject configuration object.

```javascript
export default makeProject({
  scenes: [example],
  variables: {
    circleFill: 'red'
  },
});
```

--------------------------------

### Defining and consuming a generator function

Source: https://motioncanvas.io/docs/flow

Demonstrates the basic syntax for a generator function using the yield keyword and how to iterate through it using the next method.

```javascript
function * example() {
  yield 1;
  yield 2;
  yield 3;
}

const generator = example();

console.log(generator.next()); // 1;
console.log(generator.next()); // 2;
console.log(generator.next()); // 3;
```

--------------------------------

### all(tasks: ThreadGenerator[])

Source: https://motioncanvas.io/docs/flow

Runs all provided tasks concurrently and waits for all of them to finish.

```APIDOC
## all(tasks: ThreadGenerator[])

### Description
Runs all provided tasks concurrently and waits for all of them to finish.

### Parameters
- **tasks** (ThreadGenerator[]) - Required - A list of tasks to run.
```

--------------------------------

### Using makeRefs() for Reference Management

Source: https://motioncanvas.io/docs/references

Utilizing makeRefs() to automatically generate reference objects based on component types.

```typescript
import { makeRef, makeRefs } from '@motion-canvas/core/lib/utils';

// ...

function Label({ refs, children }: {
```

--------------------------------

### Applying and Animating Blur Filters

Source: https://motioncanvas.io/docs/filters-and-effects

Demonstrates applying a blur filter and animating it back to zero using the filters property.

```typescript
yield* iconRef().filters.blur(10, 1);
```

```typescript
yield* iconRef().filters.blur(0, 1);
```

--------------------------------

### Setting initial node properties

Source: https://motioncanvas.io/docs/signals

Define a Txt node with a custom lineHeight property using a reference.

```typescript
const text = createRef<Txt>();
view.add(
  <Txt lineHeight={'150%'} ref={text}>
    Hello world!
  </Txt>
);
```

--------------------------------

### Import scene components

Source: https://motioncanvas.io/docs/quickstart

Standard imports required for setting up a Motion Canvas scene with shapes and references.

```typescript
import {makeScene2D} from '@motion-canvas/2d/lib/scenes';import {Circle} from '@motion-canvas/2d/lib/components';import {createRef} from '@motion-canvas/core/lib/utils';
```

--------------------------------

### Configure Layout.justifyContent

Source: https://motioncanvas.io/docs/layouts

Defines the justify-content property using a SimpleSignal.

```typescript
readonly public justifyContent: SimpleSignal<FlexContent, Layout>
```

--------------------------------

### Registering a plugin in a Motion Canvas project

Source: https://motioncanvas.io/docs/plugins

Import the plugin and include it in the plugins array within the makeProject configuration. Note that the plugin must be invoked as a function.

```typescript
import { makeProject } from '@motion-canvas/core';
import myPlugin from './plugin';
import example from './scenes/example?scene';

export default makeProject({
  scenes: [example],
  plugins: [myPlugin()],
  //                ^^ we need to call the function
});
```

--------------------------------

### Passing runtime options via Vite plugin

Source: https://motioncanvas.io/docs/plugins

Use the PLUGIN_OPTIONS key to define runtimeConfig, which allows passing custom data to the runtime environment.

```typescript
import { Plugin, PLUGIN_OPTIONS } from '@motion-canvas/vite-plugin';

export default function myVitePlugin(): Plugin {
  return {
    name: 'vite-plugin-motion-canvas-example',
    // ...
    [PLUGIN_OPTIONS]: {
      entryPoint: './plugin.ts',
      runtimeConfig: () => ({
        foo: 'bar',
      }),
    },
  };
}
```

--------------------------------

### Define local font directory structure

Source: https://motioncanvas.io/docs/custom-font

Place custom font files within a public/fonts directory in the project root.

```text
                                root
                                  

                              
                              
                                └─public
                                  

                              
                              
                                
                                +
                                 └─fonts *
                                  

                              
                              
                                
                                +
                                   └─CASCADIACODE.TTF
```

--------------------------------

### Import Motion Canvas components

Source: https://motioncanvas.io/docs/tweening

Basic imports required for setting up a scene with shapes.

```typescript
import {makeScene2D} from '@motion-canvas/2d';

import {Circle} from '@motion-canvas/2d/lib/components';
```

--------------------------------

### Displaying an image with Img

Source: https://motioncanvas.io/docs/media

Import the Img component and an image file to render it within a makeScene2D function.

```typescript
import {makeScene2D} from '@motion-canvas/2d/lib/scenes';
import {Img} from '@motion-canvas/2d/lib/components';
import examplePng from '../../images/example.png';

export default makeScene2D(function* (view) {
  view.add(<Img src={examplePng} />);
});
```

--------------------------------

### createRef()

Source: https://motioncanvas.io/docs/references

The createRef function is used to initialize a new reference.

```APIDOC
## createRef()

### Description
Initializes a new reference object that can be attached to elements in the scene.
```

--------------------------------

### Text Component Usage

Source: https://motioncanvas.io/docs/filters-and-effects

Basic implementation of Txt components with fill, text, and position properties.

```jsx
<Txt fill={'white'} text={'5'} position={[-115, -90]} />
```

```jsx
<Txt fill={'white'} text={'5'} position={[100, 115]} />
```

--------------------------------

### any(tasks: ThreadGenerator[])

Source: https://motioncanvas.io/docs/flow

Runs all provided tasks concurrently and waits for any of them to finish.

```APIDOC
## any(tasks: ThreadGenerator[])

### Description
Runs all provided tasks concurrently and waits for any of them to finish.

### Parameters
- **tasks** (ThreadGenerator[]) - Required - A list of tasks to run.
```

--------------------------------

### Resetting Signals to Default Values

Source: https://motioncanvas.io/docs/signals

Shows how to import the DEFAULT symbol and use it to reset a signal to its initial value.

```typescript
import { DEFAULT, createSignal } from '@motion-canvas/core/lib/signals';

const signal = createSignal(3);
// <- initial value is 3

signal(2);

signal();
// <- value is now 2

signal(DEFAULT);

signal();
// <- value is reset back to 3
```

--------------------------------

### Animating LaTeX Opacity

Source: https://motioncanvas.io/docs/nodes

Demonstrates how to control the opacity of a LaTeX element over time using yield and waitFor.

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

--------------------------------

### Initialize and assign references with createRef

Source: https://motioncanvas.io/docs/references

Use createRef to define references for scene objects and assign them via the ref prop in JSX.

```typescript
const rectA = createRef<Rect>();
const rectB = createRef<Rect>();
const circle = createRef<Circle>();

view.add(
  <Layout>
    <Circle ref={circle}>
      <Rect ref={rectA} />
    </Circle>
    <Rect ref={rectB} />
  </Layout>
);
```

--------------------------------

### Animate and Control Video Playback

Source: https://motioncanvas.io/docs/media

Demonstrates using a video reference to trigger playback and perform a scale animation.

```typescript
export default makeScene2D(function* (view) {
  // ...
  videoRef().play();
  yield* videoRef().scale(1.25, 1.5).to(1, 1.5);
});
```

--------------------------------

### Update Motion Canvas packages via npm

Source: https://motioncanvas.io/docs/updating

Run this command to update all core Motion Canvas packages to their latest versions.

```bash
npm update --save @motion-canvas/2d @motion-canvas/core @motion-canvas/ui @motion-canvas/vite-plugin
```

--------------------------------

### Applying Filters to a Circle Component

Source: https://motioncanvas.io/docs/filters-and-effects

Demonstrates how to pass an array of filter functions to the filters property of a component.

```tsx
<Layout
	layout
	direction={'column'}
	alignItems={'center'}
	gap={20}
>
	<Circle
		size={150}
		fill={'#99c47a'}
		filters={[contrast(contrastValue), saturate(saturateValue)]}
	/>
	<Layout
		direction={'row'}
		gap={20}
	>
		<Txt
			fill={'#aff'}
		>
			constrast
		</Txt>
	</Layout>
</Layout>
```

--------------------------------

### Define a custom spring configuration

Source: https://motioncanvas.io/docs/tweening

Creates a custom spring object by specifying mass, stiffness, damping, and initial velocity properties.

```typescript
const MySpring = {
  mass: 0.04,
  stiffness: 10.0,
  damping: 0.7,
  initialVelocity: 8.0,
};
```

--------------------------------

### Txt Component Configuration

Source: https://motioncanvas.io/docs/filters-and-effects

Configures a text element with specific fill, content, rotation, position, and color properties.

```tsx
<Txt fill={'white'} text={'saturation'} rotation={-90} x={-115} fill={'#ffa'} />
```

--------------------------------

### Tweening and Restoring Object States

Source: https://motioncanvas.io/docs/tweening

Demonstrates animating object properties using all() and reverting to a previous state using restore().

```typescript
yield*
all(
circle().position.x(300, 1),
circle().scale(1, 1)
);
```

```typescript
yield*
circle().restore(1);
```

--------------------------------

### Animating with the spring function

Source: https://motioncanvas.io/docs/tweening

Initializes a scene with a circle reference and imports necessary spring-related utilities.

```typescript
import { makeScene2D } from '@motion-canvas/2d';
import { Circle } from '@motion-canvas/2d/lib/components';
import { createRef } from '@motion-canvas/core/lib/utils';
import { PlopSpring, SmoothSpring, spring } from '@motion-canvas/core/lib/tweening';

export default makeScene2D(function* (view) {
  const circle = createRef<Circle>();
```

--------------------------------

### Implementing CodeBlock with Indentation

Source: https://motioncanvas.io/docs/code-block

Demonstrates how to use the CodeBlock component within a Motion Canvas view, where the indentation is calculated based on the least indented line.

```typescript
                            
                              
                                import
                                
                                {
                                CodeBlock
                                }
                                
                                from
                                
                                '@motion-canvas/2d/lib/components/CodeBlock'
                                ;
                                
                                  

                              
                              
                                
                                  

                              
                              
                                
                                yield
                                 view
                                .
                                add
                                (
                                
                                  

                              
                              
                                
                                // note that the ` bracket is followed by a new line
                                
                                  

                              
                              
                                
                                <
                                CodeBlock
                                
                                  

                              
                              
                                
                                code
                                =
                                {
                                `
                                
                                  

                              
                              
                                      console.log('Hello World!')
                                  

                              
                              
                                    // less indented
                                  

                              
                              
                                      // more indented
                                `
                                }
                                
                                  

                              
                              
                                
                                />
                                ,
                                
                                  

                              
                              
                                
                                )
                                ;
                                  

                              
                            
                          
```

--------------------------------

### Type.createSignal(initialValue)

Source: https://motioncanvas.io/docs/signals

Creates a signal for complex types using the static createSignal method.

```APIDOC
## Type.createSignal(initialValue)

### Description
Creates a signal for a specific complex type (e.g., Vector2).

### Parameters
- **initialValue** (Type) - Required - The initial value for the complex type signal.

### Example
```typescript
import { Vector2 } from '@motion-canvas/core/lib/types';
const signal = Vector2.createSignal(Vector2.up);
```
```

--------------------------------

### Adding an Image Element

Source: https://motioncanvas.io/docs/filters-and-effects

Initializes an image element with a reference for later manipulation.

```typescript
yield
view
.add(
<Img
src={'/img/logo_dark.svg'}
size={200}
ref={iconRef}
/>
);
```

--------------------------------

### Define Custom Component Signals

Source: https://motioncanvas.io/docs/custom-components

Demonstrates the use of initial state declarations and the colorSignal decorator for automatic string-to-color conversion.

```typescript
public declare readonly initialState: SimpleSignal<boolean, this>;

@initial('#68ABDF')

// @colorSignal - some complex types provide a dedicated decorator for

// signals that takes care of parsing.

// In this case, `accent` will automatically convert strings into `Color`s

@colorSignal()

public declare readonly accent: ColorSignal<this>;

// ...

}
```

--------------------------------

### Importing Google Fonts in CSS

Source: https://motioncanvas.io/docs/custom-font

Use the @import rule within global.css to load a font from a URL.

```css
@import
                                
                                url
                                (
                                '
                                https
                                :
                                //fonts.googleapis.com/css2?family=Fira+
                                Code
                                : wght
                                @400
                                ;
                                700
                                &display=swap'
                                )
                                ;
```

--------------------------------

### Initialize a reactive spawner

Source: https://motioncanvas.io/docs/spawners

Uses the spawner property on a Layout node to map a signal count to a collection of Circle nodes.

```typescript
const count = createSignal(10);

view.add(
  <Layout
    layout
    spawner={() =>
      range(count()).map(() =>
        <Circle
          width={32}
          height={32}
          fill={'white'}
        />
      )
    }
  />,
);
```

--------------------------------

### Circle Component with Mapped Properties

Source: https://motioncanvas.io/docs/filters-and-effects

Applying dynamic property mapping to a Circle component using contrast and saturation values.

```jsx
<Circle x={() => map(-150, -100, contrastValue())} y={() => map(150, 100, saturateValue())} />
```

--------------------------------

### Managing Node References in Motion Canvas

Source: https://motioncanvas.io/docs/references

Demonstrates the manual creation and nesting of Rect and Circle components using JSX.

```jsx
const rectA = <Rect />;
const rectB = <Rect />;
const circle = <Circle>{rectA}</Circle>;
view.add(
  <Layout>
    {circle}
    {rectB}
  </Layout>
);
```

--------------------------------

### Add elements to the view

Source: https://motioncanvas.io/docs/signals

Initializes the view structure by adding components like Circle to the scene.

```tsx
view.add(
  <>
    <Circle
```

--------------------------------

### Define component properties and structure

Source: https://motioncanvas.io/docs/custom-components

Demonstrates binding properties like fill, size, and radius, and nesting components like Circle within a Rect.

```typescript
fill
=
{
this
.isOn
?
this
.accent
()
:
this
.offColor
}

size
=
{
[
200
,
100
]
}

radius
=
{
100
}

>

<
Circle

x
=
{
()
=>
this
.indicatorPosition
()
}

ref
=
{
this
.indicator
}

size
=
{
[
80
,
80
]
}

fill
=
"#ffffff"

/>

Rect
>,

);
```

--------------------------------

### Enable layout root

Source: https://motioncanvas.io/docs/layouts

Enable a layout by setting the layout property on a parent node, such as a Rect, to contain child nodes.

```tsx
<Rect layout>
  {/* ↓ layout child */}
  <Circle width={320} height={320} />
</Rect>
```

--------------------------------

### Define a basic scene

Source: https://motioncanvas.io/docs/quickstart

Creates a scene using makeScene2D, which provides a generator function for defining animations.

```typescript
import { makeScene2D } from '@motion-canvas/2d/lib/scenes';

export default makeScene2D(function* (view) {
  // animation
});
```

--------------------------------

### Define and receive plugin options in TypeScript

Source: https://motioncanvas.io/docs/plugins

Use the makePlugin function with a generic interface to define and access configuration options for your plugin.

```typescript
import { makePlugin } from '@motion-canvas/core';

interface MyPluginOptions {
  foo: string;
}

export default makePlugin((options?: MyPluginOptions) => {
  console.log(options?.foo);
  // 'bar'

  return {
    name: 'motion-canvas-plugin-example',
    player(player) {
      player.onRecalculated.subscribe(() => {

```

--------------------------------

### Identify npm ENOENT error

Source: https://motioncanvas.io/docs/quickstart

This error indicates that npm cannot locate the package.json file in the specified directory.

```text
                                  
                                    
                                      npm
                                       ERR
                                      !
                                       code ENOENT
                                        

                                    
                                    
                                      
                                      npm
                                       ERR
                                      !
                                       syscall 
                                      open
                                      
                                        

                                    
                                    
                                      
                                      npm
                                       ERR
                                      !
                                       path 
                                      [
                                      path
                                      ]
                                      \
                                      package.json
                                        

                                    
                                    
                                      
                                      npm
                                       ERR
                                      !
                                       errno -4058
                                        

                                    
                                    
                                      
                                      npm
                                       ERR
                                      !
                                       enoent ENOENT: no such 
                                      file
                                       or directory, 
                                      open
                                      
                                      '[path]\package.json'
                                      
                                        

                                    
                                    
                                      
                                      npm
                                       ERR
                                      !
                                       enoent This is related to 
                                      npm
                                       not being able to 
                                      find
                                       a file.
                                        

                                    
                                    
                                      
                                      npm
                                       ERR
                                      !
                                       enoent
                                        

                                    
                                  
                                
```

--------------------------------

### Import Motion Canvas components

Source: https://motioncanvas.io/docs/random-values

Imports necessary layout and scene components for creating animations.

```typescript
import { Layout, Rect, makeScene2D } from '@motion-canvas/2d';

import {
  all,
  loop,
  makeRef,
  range,
```

--------------------------------

### makeRef()

Source: https://motioncanvas.io/docs/references

The makeRef function is used to create a single reference.

```APIDOC
## makeRef()

### Description
A utility function to create a reference.
```

--------------------------------

### Grid Component Configuration

Source: https://motioncanvas.io/docs/filters-and-effects

Configures a grid overlay with specific size, stroke, line width, and spacing.

```tsx
<Grid size={200} stroke={'#333'} lineWidth={1} spacing={20} />
```

--------------------------------

### createSignal(initialValue)

Source: https://motioncanvas.io/docs/signals

Creates a new signal for primitive types with an initial value.

```APIDOC
## createSignal(initialValue)

### Description
Creates a new signal for primitive types. The signal tracks the value and notifies dependencies when it changes.

### Parameters
- **initialValue** (any) - Required - The starting value of the signal.

### Example
```typescript
import { createSignal } from '@motion-canvas/core/lib/signals';
const signal = createSignal(0);
```
```

--------------------------------

### Grid and Text Layout Configuration

Source: https://motioncanvas.io/docs/filters-and-effects

Configures a grid with specific stroke, rotation, and dimensions alongside a text layer.

```tsx
<Grid
stroke={'#ff0'}
rotation={45}
width={18}
height={18}
spacing={5}
lineWidth={1}
/>
<Txt
fill={'white'}>
Hidden Value Layer
</Txt>
<Layout>
<Rect>,
);
yield* all(
```

--------------------------------

### createRef()

Source: https://motioncanvas.io/docs/references

Creates a reference object that can be attached to a component via the ref property, enabling programmatic access to the component instance.

```APIDOC
## createRef()

### Description
Creates a new reference object that can be used to store and access a component instance. This is the preferred method for interacting with elements created in the view.

### Signature
`createRef<T>()`

### Usage
```typescript
import { createRef } from '@motion-canvas/core/lib/utils';

const circle = createRef<Circle>();

view.add(<Circle ref={circle} />);

yield* circle().scale(2, 0.3);
```
```

--------------------------------

### loop(iterations: number, factory: LoopCallback)

Source: https://motioncanvas.io/docs/flow

Runs a generator function a specified number of times. Each iteration waits for the previous one to complete, and a new generator is created for each iteration via the factory function.

```APIDOC
## loop(iterations: number, factory: LoopCallback)

### Description
Runs the provided generator factory function a specified number of times. Each iteration waits until the previous one is completed.

### Parameters
- **iterations** (number) - Required - The number of times to repeat the animation sequence.
- **factory** (LoopCallback) - Required - A function that creates the generator to run. A new generator is created on each iteration because generators cannot be reset.

### Returns
- **ThreadGenerator** - The resulting generator sequence.
```

--------------------------------

### Displaying a video with the Video component

Source: https://motioncanvas.io/docs/media

Use the Video component to embed an MP4 file into your scene. Ensure the video file is correctly imported before passing it to the src prop.

```typescript
import { makeScene2D } from '@motion-canvas/2d/lib/scenes';
import { Video } from '@motion-canvas/2d/lib/components';
import exampleMp4 from '../../videos/example.mp4';

export default makeScene2D(function* (view) {
  view.add(<Video ref={videoRef} src={exampleMp4} />);
});
```

--------------------------------

### Create a reactive circle area visualization

Source: https://motioncanvas.io/docs/signals

Uses createSignal to manage the radius property, ensuring the scene updates automatically when the value changes.

```typescript
import { makeScene2D } from '@motion-canvas/2d/lib/scenes';
import { Circle, Txt, Line } from '@motion-canvas/2d/lib/components';
import { createSignal } from '@motion-canvas/core/lib/signals';
import { Vector2 } from '@motion-canvas/core/lib/types';
import { waitFor } from '@motion-canvas/core/lib/flow';

export default makeScene2D(function* (view) {

  const radius = createSignal(3);
```

--------------------------------

### Initialize useRandom with a custom seed

Source: https://motioncanvas.io/docs/random-values

Provides a specific seed value to the generator to produce a deterministic sequence of numbers.

```typescript
const random = useRandom(123);
```

--------------------------------

### Log messages using standard logging functions

Source: https://motioncanvas.io/docs/logging

Use these methods to output strings to the Console tab in the UI.

```typescript
logger
                                .
                                debug
                                (
                                'Just here to debug some code.'
                                )
                                ;
                                
                                  

                              
                              
                                logger
                                .
                                info
                                (
                                'All fine just a little info.'
                                )
                                ;
                                
                                  

                              
                              
                                logger
                                .
                                warn
                                (
                                'Be careful somethis has gone wrong.'
                                )
                                ;
                                
                                  

                              
                              
                                logger
                                .
                                error
                                (
                                'Ups. An error occured.'
                                )
                                ;
```

--------------------------------

### Animate value reference

Source: https://motioncanvas.io/docs/filters-and-effects

Demonstrates animating a value reference using yield with x, wait, and to methods.

```typescript
yield*
valueRef()
.x(-100, 1.5)
.wait(0.5)
.to(100, 1.5)
.wait(0.5);
```

--------------------------------

### Synchronize animations with all

Source: https://motioncanvas.io/docs/quickstart

Use the all function to execute multiple animation generators concurrently.

```typescript
yield * all(myCircle().fill('#e6a700', 1).to('#e13238', 1),myCircle().position.x(300, 1).to(-300, 1));
```
Tokens:
Raw