Adding Lottie support and text animations to my motion graphics editor
Adding Lottie support and text animations to my motion graphics editor
Issue #26
Hey! I’m Alyssa X, a serial entrepreneur building 12+ products by myself. This email is part of my maker journey, which you’re subscribed to. Feel free to forward it to others if you find it interesting! You can support me through GitHub Sponsors, I’d really appreciate it! ❤️
Hey all,
I had a chaotic week. Traveling back and forth, dealing with delayed flights, changing some product plans, and lots more. But I still managed to keep adding some new things to my product. Let's get into it!
Change of plans
In my previous issue I mentioned the 3 things I wanted to tackle this week: subtitles, animated text, and audio layers.
Out of the 3, the one that attracted me the most was the animated text, just because it added a lot to the tool (and it was a highly requested feature). So this is the one I started with. And oh gosh did it turn the whole week upside down.
Here's the tasks from last week compared to today:
So what happened? Why didn't I work on subtitles or audio layers, and why does it look like I got less done than other weeks?
Well, it all started with something I found last week, which I also talked about briefly in the newsletter. When I was researching ways to add animated text, I came across Lottie. Essentially it's a way to parse After Effects animations into JSON, and render them in different ways. This was useful as I could design the animations in After Effects, export them, and then put them in the tool as templates for users to use.
I found some code that helped me render Lottie within Fabric.js (using a separate canvas that is rendered back as an image frame by frame), and after spending a while customizing the class to fit my needs, I managed to make it work perfectly:
I can assure you the playback is perfectly smooth, the GIF might look weird. But yeah, basically I was able to import some random Lottie JSON and display it in my tool. Cool!
It also works with more complex JSONs, and you can edit like you would any other object in the canvas (I might add filters as well).
So then I was like, easy, I just need to make some After Effects animation of some text, export as Lottie without turning the text into glyphs so it's still editable, and have some code to let the user customize the text. Sounded simple enough, but here is where it all went wrong.
I tried importing the text animation, but it was all blank. I didn't get any errors or anything, just nothing was playing. I checked using other Lottie players, and it rendered perfectly fine, so I assumed it was a problem on my end.
After breaking my head for hours, I finally found my answer here:
Apparently using the canvas renderer of the Lottie library (which I need to be able to stream back into Fabric.js), it's not possible to use actual text, since the developers found it to perform poorly compared to shapes (I question why that would be enough of a reason to get rid of it - I could just pre-render the canvas and save the frames, but oh well anyway).
They suggested in order to make it work for dynamic text to have a hidden layer in after effects with all the letters I wanted to export, and then render as glyphs. Problem with this though is it would only support one font. Nonetheless I tried it, and surprise surprise it did not work (and it also took forever to render).
Then I stumbled upon another developer who had the same issue, and he had written a lengthy article detailing how he got it to work using custom fonts. While it's very insightful, and it certainly appears to work, if you read even just a little you'll realize it's a pretty crazy effort. Essentially reverse engineering the JSON code to render the glyphs manually based on the SVG path data. Just too crazy.
So at this point I was pretty frustrated, as I had spent a long time on the Lottie implementation, only for it to not work for text (which could have been explicitly mentioned in the docs somewhere...). I decided I wasn't going to do it with Lottie, and instead I would build my own custom text animation engine.
The text animation engine
Here's the more fun part of the week. I found it a bit daunting at first to build this from scratch, as it had a lot of different challenges I would have to overcome, but I quickly was able to figure it out, and all the pieces fell into place.
The way I made my engine work was like this:
Get a string of text, with a set of properties (font, color, etc.)
Iterate for each letter, render each one on the canvas, using the offset from the letter width to place it.
Group all the letters together.
To animate the letters, just iterate over each letter on the group, and animate any property using Anime.js, with delays based on the letter position to have a "ripple effect".
Boom, that simple. I set up a class for it, so I could initialize the groups and expose a set of methods to animate, change properties, and get information about the text animation (being a group made out of objects made it trickier to put directly into my tool).
And here you go, working perfectly. I had to design a custom properties panel for it, with options to switch the preset, change the text (font, color...), the order of the animation, whether to animate letters or words, and set the duration. ATM it has presets to slide, fade, scale, and show as a typewriter (no fade when showing the letters), but I might add more.
Here's some more things it can do (I know it's very small, I need to make better videos haha):
In order to change the text of the animation, unfortunately I need to re-render the entire animation (so it can show each letter), so I need to have it on an input in the properties and a button to apply the changes. I don't think it's a big deal for now though.
I plan on adding more animations soon, or post launch, as there's a lot that could be done with it. I'm also considering having things like lower thirds where there's more elements, and maybe playing with masks.
Then I had to think about how to add this into the tool. I figured the easiest thing would be to have it in a separate tab (since it's not really text), and show all the different options visually (making a GIF for each would be a pain to be honest). I also thought maybe I could combine it with the Lotties (which yes, I guess I will keep, might as well), allowing the user to browse some Lotties or upload their own.
One other thing I thought about was having ending transitions for the text. So for example, the text fades in, but you want it to fade out at the end. So I thought I could add a section in the properties panel where you can set the "end animation". If the user doesn't want it they could set the preset to "none" (could be by default).
I also considered having some sort of way to go from a normal text object to an animated one. The main issue with it is the fact that my engine does not support multiline text at the moment, or different text alignments. So while I could look into it, it might take a while for me to get it to work.
Anyway, that's why I was only able to work on text this week. I like to think I still did some decent progress, but I hope next week I'm able to get more done.
Miscellaneous things
This week I also had some other things happen. I received my trophy from the JsNation conference last month, where my extension Omni won in the category of Best Productivity Booster. Sadly I wasn't able to be there myself, but it was really exciting to win an award for one of my products. I made a tweet about it earlier this week:
I also got some exciting news/updates this week about something I've been looking into for a few months now. I can't really reveal much at all just yet, but if successful I could build my products much more effectively. I'll just let you know once I have something final, in a future issue :)
Honestly it's proving pretty challenging to make good progress with my motion graphics editor when I only have 2 days a week where I can do any work because of my full-time job. Every week on Sunday I feel like I'm almost there, but then I have to wait 5 more days to add anything else (or find some free time through the week, but it's difficult).
I probably should get the last few features in and just focus on polish and testing, I can always add more post launch. Otherwise it's just going to take too long to get this out there, and I'd like to work on other projects too.
That's about it I think! Also, I would really like to hear any feedback / ideas for my product, if you have any. Just reply to this email to let me know :)
See you next week,
Alyssa X