Motion Canvas – Visualize complex ideas programmatically | Hacker News Reader

Motion Canvas – Visualize complex ideas programmatically

github.com

180 pointsmatijash35 comments

> Visualize Complex Ideas Programmatically

That has got to be the most inappropriate tag line I've ever seen. This is a 2D animation library and editor.

Ironically, I was searching for just one visual or gif on the GitHub or documentation, to understand what it does.

Its actually not an inaccurate tagline. Unfortunately the website does a TERRIBLE job of explaining it. You would be better off watching the intro video (which cant be found on the website...): https://www.youtube.com/watch?v=WTUafAwrunE

This is called marketing, a way to differentiate. Instead of telling what the product is "a 2d animation library and editor", you tell what it's purpose is.

More accurately, you're supposed to connect with people by stating what problem they have that this solves.

'the need to solve complex ideas programmatically' is a problem that people have.

This product does not solve that for any reasonable interpretation of the tag line, unlike say processing or openframeworks.

That works when the differential is actually accurate

Do people not understand how big a difference a single image on the main page can make? I see visual in the title (or it reads as something visual), I click, I see a wall of text, I close and move on. Even if its a cmd line lib or something, post an image of the text being typed, does wonders if you want anyone to care.

It's a good sign as to whether or if the tech is really about creating beginners, or not.

Also why p5.js and Coding Train was what my brain was looking for. Their intro for p5.js is great too.

This is a much better link than the GH repo - it contains examples and the docs. https://motioncanvas.io/

This video from the author is probably the best explainer: https://www.youtube.com/watch?v=WTUafAwrunE

Why don't repo READMEs have these example links when they're so readily useful for visual things?

My canvas library's README[1] has a video embedded in it. FWIW I'm not convinced it adds anything to the library's sales pitch.

[1] https://github.com/KaliedaRik/Scrawl-canvas

Agreed - much better link.

However, I "Try the editor" and then I can't find source. Clicking "GO TO SOURCE" in the properties window doesn't seem to do anything. Am I missing something?

FF and Chrome on macOS.

It looks like the source editor pane (which was in the intro video?) has gone away. It's using the code from https://motioncanvas.io/docs/quickstart.

On the "pro" side, uses code instead of pointy-clicky, and the integration with the audio source and waitFor looks really nice, useful, and intuitive.

I don't know typescript so much of the youtube demo (linked from here https://news.ycombinator.com/item?id=34900161) was magic to me. I have worked with OpenSCAD some and prefer its declarative approach over imperative approaches. I don't know what all the author doesn't like about declarative, but the one example he gave in the video was that if you want to change the time of one keyframe, you have to adjust the time of all the keyframes that come after it, but that doesn't seem implied by a declarative model, maybe by some other particular tools?

Most animation software (i.e. Synfig) have that keyframe thing. For example, if you want to synchronize an animation sequence with audio.

Also! https://mechanic.design/

This really needs examples. There's a single one on the homepage but that's all I could find.

I believe on the website the YouTube video linked is using this library throughout the whole video to give you visual references based on what the person is talking about. It's a pretty good demo..

https://www.youtube.com/@aarthificial

Thanks. The game dev videos here are very well done.

There seem to be some here: https://github.com/motion-canvas/examples

I second the need for samples. This looks great, but when there are no examples of it in use I have to wonder if it's really been tested in real use cases.

Using generators to control animation flow is genius. Having used Remotion a bit it's heavily dependent on current frame count in complex animations. Generators is a more elegant solution.

This pattern has been used for GUI toolkits as well. I specifically recall seeing it in the Caliburn.Micro framework for C#. It takes a bit of getting used to but it's pretty neat.

A quick Google found that this tutorial shows the technique off a bit: https://www.atmosera.com/blog/jounce-part-15-asynchronous-se...

I have been playing with this a bit recently and it is incredible. Very well written docs and anything they don’t cover, the code is really easy to read. I am excited to use this more and see where the project goes.

I miss flash.

If you happen to mean the authoring tool, Adobe Flash Professional is now Adobe Animate. https://www.adobe.com/products/animate.html

Would Ruffle[1] help?

[1]: https://ruffle.rs/

OK, would somebody please explain why this keeps getting down-voted? I mean, I don't care about the karma, I just don't get it. The parent poster expressed an interest in Flash, and this is one of the various efforts to implement an open source analog of the Player component of Flash. Lightspark being one of the others. So how is mentioning this a problem??

There’s also www.rive.app

I also wonder how this compares to https://www.framer.com/motion/, anybody tried both?

so is this like a fancier manim?

It is more like remotion than manim, though the two are not the same.

Or possibly a more programmatic Synfig.

Reply on news.ycombinator.com