Bundling for browser canvas

[imohanvadivel]

Since motion canvas primarily uses canvas, I think we could leverage it to render animation on a webpage directly in a canvas element. But I'm not sure, how to bundle / compile the source for browser.

Could anyone help me with this.

[aarthificial]

This is still undocumented but you can already embed Motion Canvas animations on the web.
We do that on our documentation website, for example.

You can run the following command to build your project:

npm run build

This will produce a compiled project file in the dist/ directory.
On your website, you can then install our player package:

npm i @motion-canvas/player

It contains a Custom Element that can display the animation:

import '@motion-canvas/player'; // import the player somewhere on the website.

<motion-canvas-player
  src={`/project.js`} <!-- link to the statically hosted project file -->
/>

[StefanKreidel]

@aarthificial I am assuming that the import of the player is intended for projects which are built before being shipped (e.g. vue or react)?

I wanted to integrate the player in an out-of-the-box jekyll project, ready to be hosted on GitHub. I installed the player as you described, then built it with webpack:

webpack build '@motion-canvas/player/dist/main.js' -o js/motion-canvas-player

and then included it in the jekyll page (post jekyll template shown):

<script src="/my-project/js/motion-canvas-player/main.js" type="text/javascript"></script>

What is the problem?
When including my already built animation with (post jekyll template again):

<motion-canvas-player src="/my-project/animation/test.js" auto="true"></motion-canvas-player>

I get an error

main.js:1 Uncaught (in promise) TypeError: r?.serialize is not a function
    at x.configure (main.js:1:10477)
    at rt.updateSettings (main.js:1:43326)
    at rt.updateSource (main.js:1:42519)

What am I even asking?

Am I missing something fundamental? Can I not build the player with webpack? If so, is there another way?

Any help would be much appreciated.

(motion-canvas and player version is 3.3.4)

[aarthificial]

@StefanKreidel Can you make sure that your project was actually built using v3.3.4?
This issue should already be fixed by #555 which is out in that version.

[StefanKreidel]

Thanks for the fast feedback!

I just created a new project from scratch using v3.3.4. Turns out, using the quick-start example from the docs actually works. Just my somewhat large animation does not. Weirdly enough, it works perfectly fine when running npm run serve...

I'll investigate and try to figure out what is going on.
My source code is also on GitHub. It is however very basic. Just stumbled across motion-canvas 2 days ago.

[aarthificial]

Theoretically, the contents of the scene shouldn't really matter.
This error is thrown here:

motion-canvas/packages/core/src/app/Stage.ts

Lines 71 to 74 in 9030ca0

	this.background =
	typeof background === 'string'
	? background
	: background?.serialize() ?? null;

Because background is an instance of a wrong class that doesn't have the serialize method.
This is the project background configured in the Video Settings

[StefanKreidel]

First of all: thank you Jacob for not only responding so fast but for also investigation my issue! I really enjoy seeing someone being so dedicated to their project. Hugh compliment from me!

Now, I tried a few different things, including setting the background via view.fill(...) instead of the project settings. But nothing really worked. Sometimes the error disappeared but so did the entire player from my site.

The workaround described in #577 is the only thing currently working for me:

// import color specifically in your scene.tsx
import "@motion-canvas/core/lib/types/Color"
...

[aarthificial]

Closing this in favor of #247

[K0IN]

It would be sick if we can bind the canvas progession to a external source, i would really like to bind it to the scroll postion to use this as a type of scrollytelling tool.