Completing the text animation feature set, and adding audio layers
Completing the text animation feature set, and adding audio layers
Issue #27
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'm not feeling well, but I figured I'd still share some of the progress I did this week with my project.
Uh oh
Last week I was a bit frustrated with my progress, as I was only able to add text animations into the tool and didn't get to work on audio layers or subtitles at all.
Well, this week has been even worse.
Here's the tasks in Notion:
Yep, I only got 4 things done.
Basically for the past few days I've been feeling really dizzy and lightheaded, with a lot of vertigo, and I haven't been able to focus at all. At first I thought I was just tired or lazy, but it's been getting worse to the point I can barely stand and walk around for long.
Anyway, I tried to get a few features in the tool nonetheless, since I'm just so close to finishing it up.
Text animation
First I wanted to complete the text animation feature set. Last week I had somewhat of an idea of how it would look like in the panel, but this week I decided to go a different direction with it. One of the issues I had with the previous design is that it required a completely different panel section for "sprites", and it could have caused confusion for users if they didn't see the text animations within the text panel.
What I did instead was combine the text panel with the animations, adding a section within showcasing the different presets that are available. Then in order to add a new text animation, all the user has to do is click on any of the options. Very simple.
Then I thought about working on the end animation for text, which was the last remaining task, but unfortunately it's a bit tricky (you need to make sure it doesn't overlap the start animation, needs to have an option to enable / disable, has to be the reverse of the start, etc) so I decided I would leave it for when I'm feeling better.
Audio layers
I decided to move on to working on audio layers, since I figured it would be relatively simple, but I was wrong.
The way I implemented the layer system in my tool works in such a way that layers require an instance of themselves within the canvas. Audio does not have any entity, so when I tried adding it in it just threw all sorts of errors. The workaround I came up with was to create a empty object, and just hide its handles and disable its selection so you wouldn't see it.
I also had to give audio a unique property panel, with unique animation properties. I decided for the first version the only exposed property would be the volume, which you can animate up and down with all sorts of easing. Here's a bit of the behavior, although it's kind of hard to show through a GIF:
I also had to rework how the audio panel worked altogether, since there's no background audio anymore. Instead of redesigning it completely, I just decided to reuse what I had, and letting the user click on any of the music to add it to the canvas, or upload their own. Here's how it works:
I also gave audio layers a different color and icon to distinguish them, although I'm still not 100% sure.
Clearing the project
The last thing I did was just add an option to clear the project, as per popular request. I put it underneath the tools in the toolbar, as a "more" button where I will likely put other options. Right now it just shows a browser popup for confirmation, and then it clears the local database and refreshes the page (not the prettiest, I know). Seems to work ok though:
And that's it. Nothing else. I hoped today I would start feeling better to be able to do some more work, but unfortunately it's only gotten worse, so I just had the energy to write this issue.
The good thing is though that there's not a lot of things remaining to do, so I think it won't be long until I finish the project.
See you next week,
Alyssa X