DOCSEARCHbyAlgolia
Submit Docs

Motion Canvas Documentation

website·Indexed 31 days ago

http://motion-canvas.io/

A framework for creating programmatic animations. The documentation includes a comprehensive 2D API covering components like Latex, QuadBezier, and Ray, as well as core threading utilities and detailed property interfaces for shapes, curves, and code highlighting.

Tokens
154.7K
Snippets
1.2K
Records
1.8K
Agent score
61%

What's inside Motion Canvas

  1. Overview of Motion Canvas Meta runtime representations

    The @motion-canvas/core/lib/meta module provides the runtime representation of meta files. It includes a variety of specialized meta-field classes for different data types (Boolean, Color, Enum, Number, Range, String, Vector2) and a base MetaField class.
    import { ... } from "@motion-canvas/core/lib/meta";

  2. Overview of GeneratorScene

    GeneratorScene<T> is the default implementation of the Scene interface. It uses generators to control animations and is designed to be extended to create custom scenes within a Motion Canvas project.
    abstract class GeneratorScene<T> implements Scene, ThreadGeneratorFactory<T>, Threadable

  3. Overview of the Spline component

    The Spline class extends Curve and is used to draw smooth lines through a set of points. It achieves this by using Bézier curves for each segment of the spline.
    class Spline extends Curve

  4. Overview of the Curve abstract class

    The Curve class is an abstract extension of Shape used to define curve-based components. It is the base class for several specific shape implementations including Bezier, Circle, Line, Path, Polygon, Ray, Rect, and Spline.

  5. Overview of TxtProps interface

    The TxtProps interface defines the properties available for text components in Motion Canvas. It extends ShapeProps, meaning it inherits all shape-related properties including layout, positioning, and transformation.
    interface TxtProps extends ShapeProps

  6. Overview of Motion Canvas components and purpose

    Motion Canvas is an open-source tool designed for creating informative vector animations synchronized with voice-overs. It is not a replacement for traditional video editing software. It consists of two primary components:

    1. A TypeScript library: Uses generators to program animations.
    2. An editor: Provides a real-time preview of animations and allows for the editing of specific animation aspects (such as time events) to reduce manual effort.

  7. Overview of the Shape abstract class

    The Shape class is an abstract base class that extends Layout. It serves as the foundation for various 2D components in Motion Canvas. Common subclasses that extend Shape include Code, Curve, Grid, SVG, and Txt.

  8. Overview of CurveProps interface

    CurveProps is an interface that extends ShapeProps. It is used by several 2D component types to define the properties of curves, including:

    • CircleProps
    • CubicBezierProps
    • LineProps
    • PathProps
    • PolygonProps
    • QuadBezierProps
    • RayProps
    • RectProps
    • SplineProps
    interface CurveProps extends ShapeProps

  9. PolygonProps Interface Overview

    The PolygonProps interface defines the properties available for the Polygon component in Motion Canvas. It extends CurveProps, meaning it inherits all properties related to curves, including positioning, styling, and animation controls.
    interface PolygonProps extends CurveProps

  10. Understand the Segment abstract class

    The Segment class is an abstract base class in Motion Canvas used to define a segment of a curve. It is extended by specific segment implementations such as CircleSegment and LineSegment.

  11. Use Subscribable to provide read-only event access

    The Subscribable<TValue, THandler> class provides safe access to the public interface of EventDispatcherBase. It allows external classes to subscribe to and unsubscribe from events without granting them the ability to dispatch those events.

  12. Use SVGDocument to contain SVG shapes

    The SVGDocument interface represents an SVG document that contains SVG shapes. It is typically used once in a scene because the shapes within its nodes array maintain a reference to the parent SVG renderer.