Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/motion-canvas/motion-canvas
Visualize Your Ideas With Code
https://github.com/motion-canvas/motion-canvas
animation presentation visualization
Last synced: 3 months ago
JSON representation
Visualize Your Ideas With Code
- Host: GitHub
- URL: https://github.com/motion-canvas/motion-canvas
- Owner: motion-canvas
- License: mit
- Created: 2022-08-03T16:30:14.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-20T14:57:40.000Z (6 months ago)
- Last Synced: 2024-07-31T04:01:57.335Z (6 months ago)
- Topics: animation, presentation, visualization
- Language: TypeScript
- Homepage: https://motioncanvas.io
- Size: 10.9 MB
- Stars: 15,679
- Watchers: 77
- Forks: 586
- Open Issues: 107
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
- Security: SECURITY.md
Awesome Lists containing this project
- awesome-github-repos - motion-canvas/motion-canvas - Visualize Your Ideas With Code (TypeScript)
- stars - motion-canvas/motion-canvas - Visualize Your Ideas With Code (TypeScript)
- my-awesome - motion-canvas/motion-canvas - 12 star:16.5k fork:0.6k Visualize Your Ideas With Code (TypeScript)
- StarryDivineSky - motion-canvas/motion-canvas
README
# Motion Canvas
Motion Canvas is two things:
- A TypeScript library that uses generators to program animations.
- An editor providing a real-time preview of said animations.
It's a specialized tool designed to create informative vector animations and
synchronize them with voice-overs.
Aside from providing the preview, the editor allows you to edit certain aspects
of the animation which could otherwise be tedious.
## Using Motion Canvas
Check out our [getting started][docs] guide to learn how to use Motion Canvas.
## Developing Motion Canvas locally
The project is maintained as one monorepo containing the following packages:
| Name | Description |
| ------------- | -------------------------------------------------------------- |
| `2d` | The default renderer for 2D motion graphics |
| `core` | All logic related to running and rendering animations. |
| `create` | A package for bootstrapping new projects. |
| `docs` | [Our documentation website.][docs] |
| `e2e` | End-to-end tests. |
| `examples` | Animation examples used in documentation. |
| `internal` | Internal helpers used for building the packages. |
| `player` | A custom element for displaying animations in a browser. |
| `template` | A template project included for developer's convenience. |
| `ui` | The user interface used for editing. |
| `vite-plugin` | A plugin for Vite used for developing and bundling animations. |
After cloning the repo, run `npm install` in the root of the project to install
all necessary dependencies. Then run `npx lerna run build` to build all the
packages.
### Developing Editor
When developing the editor, run the following command:
```bash
npm run template:dev
```
It will start a vite server that watches the `core`, `2d`, `ui`, and
`vite-plugin` packages. The `template` package itself contains a simple Motion
Canvas project that can be used during development.
### Developing Player
To develop the player, first build the template: `npm run template:build`. Then,
start `npm run player:dev`.
## Installing a local version of Motion Canvas in a project
It can be useful to install a local version of Motion Canvas in a standalone
project. For example, when you want to use your own fork with some custom-made
features to create your animations.
Let's assume the following project structure:
```
projects/
├── motion-canvas/ <- your local monorepo
└── my-project/ <- a bootstrapped project
└── package.json
```
You can link the local packages from the monorepo by updating the `package.json`
of your project. Simply replace the version with a `file:` followed by a
relative path to the package you want to link:
```diff
"dependencies": {
- "@motion-canvas/core": "^3.11.0",
+ "@motion-canvas/core": "file:../motion-canvas/packages/core",
// ...
},
```
If you're linking the `ui` package, you'll also need to modify `vite.config.ts`
to allow vite to load external files:
```ts
import {defineConfig} from 'vite';
import motionCanvas from '@motion-canvas/vite-plugin';
export default defineConfig({
server: {
fs: {
// let it load external files
strict: false,
},
},
plugins: [motionCanvas()],
});
```
This is necessary because the editor styles are loaded using the `/@fs/` prefix
and since the linked `ui` package is outside the project, vite needs permission
to access it.
Then run `npm install` in to apply the changes and that's it.
You can use the same technique to test out any custom package you're working on.
## Contributing
Read through our [Contribution Guide](./CONTRIBUTING.md) to learn how you can
help make Motion Canvas better.
[authenticate]:
https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-npm-registry#authenticating-with-a-personal-access-token
[template]: https://github.com/motion-canvas/project-template#using-the-template
[discord]: https://chat.motioncanvas.io
[docs]: https://motioncanvas.io/docs/quickstart