I’ve worked with SnowSoup in the past and he contacted me a couple weeks back about getting animated alerts and a few updates to his cards. I’ll show both even if the title only says SnowSoup animated Twitch alerts, yay for SEO. It took a little time before I had an opening in my schedule so he actually got partnership right before I started on the project.
As with larger projects I do a preview pass with a few written lines over what I imagine the animation will look like. Of course once you get into the coding of you’re going to discover new ways (as I get better and better at doing CSS) and also new ways to create the animations that you want.
I showed the preview to SnowSoup and he liked what he saw. We both decided that the follower alert should be smaller and with a bit less impact than the rest. This is a common thing. Not that followers is a bad thing to have but because at a certain stage follower messages can be a on the verge of coming up too often. Of course as you a streamer grows even larger those follower alerts can become and intrusion more so than anything else.
I started coding as soon as the preview as approved. For the past few months I’ve gotten super effective in coding these up and I’ve learned a bunch of tricks specifically for animated Twitch alerts. For the SnowSoup animated Twitch alerts I even did a few new things in the code.
As you can see there’s a bunch of “snowflakes” coming down and fading in and then fading out. Since I didn’t want to have to create a bunch of image tags I used a few CSS statements to get them individually as background images.
To get the animation to sort of parallax I randomly assigned different speeds to the SnowSoup animated Twitch alerts. Before that I felt, and looked, like it was falling like one big block. Once I added two more instances of the snow flakes I also gave that additional delay and slight position change. That resulted in the more organic (as snow falling should feel like) feel to the SnowSoup animated Twitch alerts.
Coding with CSS is far from the same as creating an animation in After Effects or in any similar program. It’s more about visualizing the code come alive. It’s also not made with frames but with percentages. So you decided what something looks like at 0% and then next (maybe 20%) and so on until you get to 100%. You can then decide if that should happen once, reversed, alternate, both and so on. It’s a sea of things that you can dive into if you want to.
For the SnowSoup animated Twitch alerts it was needed to add them both to Muxy and to Streamlabs. You can read my thought on both of the services when it comes to HTML/CSS integration.
I added all of them to Muxy and what was possible to Streamlabs. I had to do some modifications to the Streamlabs one since they yet don’t really support everything that’s needed to create the type of alerts that I do.
I don’t think there’s too much to say about the alerts that I didn’t mention in the previous paragraphs.
Bonus: Animated Cards
Lastly, since we’re talking about the SnowSoup animated Twitch alerts, I want to show you what else was made. This is the ending screen for snow soup (it also got added to the starting screen) and as you can see it also has CSS animation.
The CSS animation is a perfect loop that extends over 30 seconds. Now as I said we could easily change that to 60 seconds (it was done for the starting screen) or 1000 seconds if needed. This was way can get a really cool effect with everything from effecting the title and the background over time.
If you enjoyed the SnowSoup animated Twitch alerts and want your own? You should check out my professional Twitch branding services and get in contact right away.