Theatre.js: Animation motion design editor / library for high-fidelity graphics

by sebg • 5 years ago

127 11 5 years ago

Warning for those with limited data allowances: the page has almost 15MB of animated GIFs. Far from the largest I’ve seen (we’ve had submissions with over 200MB of GIFs, which is beyond the pale), but decidedly bigger than I consider acceptable.

Could people please just stop using GIFs for this. It’s a bad format that has no place here. Or anywhere, frankly. Use a real video format, because they produce higher quality results in less space with less client-side resource usage, and handle loading better (generally granting users more control, like blocking autoload/autoplay). And yes, GitHub supports videos, so you can’t even claim GIF as a pragmatic option any more. (I maintain that such animated GIFs were inappropriate even before that was the case, but now we don’t even have to quibble over that point.)

But although I am complaining about GIFs, I do want to praise Aria for putting those things in a separate repository so that they’re not bloating the main code repository with big stuff that needs updating every so often anyway.

cheschire• 5 years ago

if only desktop browsers supported throttled internet connections by offering filters for large embedded media.

And yeah, browser extensions, but that doesn't help on work-issued laptops.

jeroenhd• 5 years ago

I don't think the use case would be popular enough for that to be incorporated into desktop browsers. Even on mobile, browsers rarely support setting a maximum file size for images. Enabling such a setting would break many of not most media oriented websites, and browser developers would probably get more complaints than thank yous for adding the feature because people want to save data but watch YouTube at the same time. Of course, developers have the ability to fix this on their websites, but when they (ab)use Github as a welcome page they often don't have enough control to do so effectively.

The best solution I can think of is either using addons or maybe a data saving proxy to help out. I doubt either will work on a work-issued laptop, though. Regardless, I'd personally assume that with a laptop I don't control, I also don't have any control over how much data it's using. I can't imagine having to browse the web with a browser I can't even install Ublock Origin onto.

AriaMinaei4• 5 years ago

(Author here) Agree with you as I have to deal with limited data every now and then.

I was weighing whether to go with videos or GIFs a few days ago. Sadly, video in markdown is not supported everywhere (eg. in npmjs.com) so some users wouldn't see them. And the readme wouldn't make much sense without the videos as this project is about motion design, so not much to explain in text.

So I opted for GIFs and spent a couple of hours cutting/speeding up videos to get the file sizes down.

The docs OTOH, contain no GIFs :) https://docs.theatrejs.com/getting-started/

blurrypepe• 5 years ago

Nice

isuckatcoding• 5 years ago

Looks very cool and interesting

One minor nitpick: could you disable the auto play video on the “Get Started” page?

AriaMinaei4• 5 years ago

I can do that. Are the auto playing videos intrusive on your device?

AriaMinaei4• 5 years ago

(Author here)

Great to find this on the front page!

I call Theatre.js a hackable animation tool. It helps you to:

- craft detailed motion for JS values,

- route those values to actual visual objects, like DOM nodes, THREE.js objects, or your homemade libraries, (someone even did a lightshow with Arduino and Theatre.js)

- and build visual tools for your own tech stack.

I've posted more screenshots here: https://twitter.com/ariaminaei/status/1439918117807853575

Happy to answer any questions!

sprafa• 5 years ago

Looks very interesting. As a C4D/AE artist I’ve often wondered about having an animation tool for the web. Love this

tomhunters• 5 years ago

This is quite interesting; how long did it take to complete this library? Also, it would be great if low-end phones could cater to high-fidelity graphics and never get laggy.

AriaMinaei4• 5 years ago

how long did it take to complete this library

The library has been part of a larger project so it's hard to say how much the library itself has taken to develop.

Theatre.js: Animation motion design editor / library for high-fidelity graphics

Related Stories