*Today is day 2 of 29 Days of Open Source Alternatives, and in this short week of February, we're covering Game Development and Multimedia. If you'd like to see more open source games, you can check out my OSS Games Page. *
Before coming into tech, I spent a lot more time writing and working creatively, mostly writing screenplay or tv pilot specs. It's always been my dreams to see my stories come alive on screen. You know that crane shot you see in the most epic of all scenes in action movies? That has always been my dream.
You know, like this one.
I knew I could do the writing, but I never thought I could build the crane shot myself. But I should've know, there's power in tech and power to enable myself to make my dreams come true.
When I stumbled across theatre.js, and I needed to know more.
Theatre.js is a javascript animation library with a professional motion design toolset. It helps you create any animation, from cinematic scenes in THREE.js, to delightful UI interactions.
Theatre.js is like a superpower for boosting your creativity. It's open, friendly, and lets you bring your animation ideas to life. You can make things spin, bounce, fly, and change those colors without writing tons of code. You can even implement that dream of mine: the crane shot.
Motion design editor for the web
Motion Design, for the web
✨ Update: Theatre.js 1.0 is around the corner. We have temporarily moved development to a private repo so we can iterate faster. We'll push our work back to this public repo soon. Terms and license will remain OSS, as before. (Also, we're hiring – join the core team!).
Theatre.js is an animation library for high-fidelity motion graphics. It is
designed to help you express detailed animation, enabling you to create
intricate movement, and convey nuance.
Theatre.js can be used both programmatically and visually.
You can use Theatre.js to:
-
Animate 3D objects made with THREE.js or other 3D libraries
Art by
drei.lu
-
Animate HTML/SVG via React or other libraries
-
Design micro-interactions
-
Choreograph generative interactive art
-
Or animate any other JS variable
Documentation and Tutorials
The docs are at theatrejs.com/docs:
Features
-
Intuitive Timeline Editor: Allows precise control over animation sequences.
-
Real-time Collaboration: Facilitates teamwork in animation projects.
-
Extensible Architecture: Enables integration with various frameworks and tools.
-
High Performance: Optimized for smooth and complex animations.
-
JavaScript and TypeScript Support: Offers flexibility in development.
Ok, so all those features might all seem vague, but I was able to get their THREE.js starter project up and running pretty quickly. This is what it looked like:
Comparison with Proprietary Software
Comparing Theatre.js with popular proprietary animation tools like Adobe After Effects and Autodesk Maya:
| Feature |
Theatre.js |
Adobe After Effects |
Autodesk Maya |
| Open Source |
Yes (MIT License) |
No |
No |
| Real-time Collaboration |
Yes |
Limited (only within the same team or organization through Creative Cloud) |
Limited (only through third-party plugins like Shotgun or ftrack) |
| Timeline Editing |
Intuitive and flexible |
Extensive (with keyframe animations and motion graphics features) |
Extensive (for creating complex 3D animations and visual effects) |
| Integration with Dev Tools |
High (web development tools such as VS Code and Chrome Developer Tools) |
Moderate (through Adobe's plugin ecosystem and extendable APIs) |
Moderate (via Autodesk's scripting language, Python integration, and other plugins) |
| Custom Scripting |
JavaScript/TypeScript |
JavaScript for expressions; not all functionality exposed to custom scripts |
Python, Mel, and C++ via Maya Embedded Language API |
| Pricing |
Free (open source); potential costs associated with hosting and scaling solutions |
Subscription-based (starts at $22.99 per month for individuals) |
$1,875/year for individual users on an annual plan |
Open Source Support & Popularity
Although the stars tell a story of excitement, jumping high from 2022 until now, the contributions tell a different story, with only three contributors over the last 30 days.
⭐ 10.3k
👀 115
forks: 323
license: Apache-2.0
In fact, the last PR was merged in 27 days ago from the time of writing this post. My PR was merged in yesterday 🎉 I will say that it was one of the smoothest and fastest experiences I've had submitting to an open source project. There are currently 88 issues open, so there's room for new contributors to help!
Takeaways
The nice thing about theatre.js is that it works with any front-end framework. It can be a little bit tricky to follow the docs though. I actually have a PR up to clarify where users should add code. I actually had a PR merged in to clarify where to add code. If you're a hobbiest, like I am, it's interesting to play around with theatre.js and see what you can get going.
If you've made something with theatre.js, I'd love to see it. Please drop it in the comments below.
If you enjoyed this post, check out some of the other open source projects we're covering in 29 Days of Open Source Alternatives during the month of February, and let me know if there are any you'd like to see on the list.
BekahHW
