Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

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

github.com

Post reply on HN
Print view View original

1–10 of 12 posts

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

#2

Post by chrismorgan »

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.

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

#4

Post by cheschire »

chrismorgan wrote: post #2

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 qualit…

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.

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

#5

Post by AriaMinaei »

chrismorgan wrote: post #2

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 qualit…

(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/

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

#7

Post by jeroenhd »

cheschire wrote: post #4
chrismorgan wrote: post #2

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 qualit…

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.

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.

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

#8

Post by AriaMinaei »

(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!

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

#9

Post by sprafa »

AriaMinaei wrote: post #8

(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://twitte…

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