Haven’t been here in a few years as I was exploring other industries, but in the end of the day I realized that my heart is still in motion design
Now that I’m back to this great platform and community, let me share something with you. So, recently I had a need to write a simple script for After Effects to go together with the project I’m working on.
And if you have ever written an AE script before, you know how painful it can be.
So I sat down and thought, what if there was a better way? As such, AfterScript was born.
What is AfterScript?
AfterScript is a UI framework for ExtendScript that brings modern JS syntax and declarative component-based UI to After Effects scripting.
Here’s the full list of what it gives you:
- Declarative component-based UI
- Build tool
- Automatic minification
And now you’re probably thinking:
Wait, wait, what the hell is a “declarative component-based UI”? And all the other stuff while we’re at it?
Components and syntax
If you’re familiar with current Web technologies, you probably heard of React and it’s syntax - JSX (not to be confused with Adobe’s JSX). React is what hugely inspired this framework.
Let me demonstrate how it works.
Here’s how a simple dockable “hello world” script would look like in regular ExtendScript:
And here is how the exact same script looks like when written with AfterScript:
That is literally 1/3 of the original code size! And you get ES6/7/8/Next syntax, timers,
console.log and all the good stuff ExtendScript is missing.
But the best part about component-based UI composition is that you can create custom and reusable components you can use in one or multiple scripts. Check this out.
Here I’m creating a component that has a text and a button. Pretty common thing to have, right? Here’s what it looks like:
The possibilities of this are huge! You can reuse components, rearrange elements with literally arrow keys in your editor (nowhere near as easy to do with
thing.add() declarations) and once again, you get modern syntax and a few extra conveniences like not having to worry about dockability (that is a real word).
AfterScript comes with a CLI build tool that will help you set up a project as well as build and bundle your script with just one command.
Wow! How can I use it?
AfterScript is fully open source and available on GitHub.
You can read the full Readme there.
If you have any questions, comments and suggestions, feel free to let me know!