Branding Twitch

Basics of Animated Twitch Alerts CSS

animated Twitch alerts

Let’s just quickly talk about animated Twitch alerts. What I want to go over is the simplicity in the process and how well crafted the outcome becomes. It dosen’t matter if you’re crating brand new ones or want to add animations to what you already have. This is not a tutorial by rather to give you a basic understanding of how a animated Twitch alert works.

Luckily both Muxy and Streamlabs allows for custom HTML/CSS (and JavaScript, but we’ll not get into that here). That means that you now don’t have to rely on the built in animations in Muxy and Streamlabs. However you do still need to try and avoid using the same CSS classes. Since if you do some weird things can end up happening. Currently none of the services (as far as I know) give you any warnings if you’re using classes they’re using.

Design Structure

Of course this is my process and yours may vary. I’m going at this from a design perspective first and animation and coding as second and third.

What I like to do is to look at the brand itself first. Understand the essential parts of it and then deconstruct it. Let’s take an obvious example of a brand for a streamer called RoboMan. We have a few essential parts with him having the brand of robot and all we might want to consider making that part of it. We also know that he’s all-in on First Person Shooters. Finally we also know that he uses a voice changer to make his voice sound robotic.

With all of these things we start to design. We might create a metallic frame with a futuristic font as a base. Then we have a glowing futuristic cross-hair on one side. Behind that we also have an avatar of RobotMan that we want peek in from the top with one eye closed as he’s getting ready to shoot.

Animation Idea

When we have our basic design ready I start to think about how these elements could be animated. I try not to put any restrictions on this at this point. However it’s always difficult to 100% distance yourself when you have worked a lot with CSS animations already.

For our example I would first let the cross-hair weave in from the left. Not slide in but rather have a more random movement as it moves into position (maybe add a “flash” and a gunshot sound). Then I would build up the frame one side at a time. Have the name and any other text have a type on effect. Lastly I would have the avatar peek up from behind the alert.

Here’s where we also can start to figure out the exit animations for all of this. We could have the whole alert fade out or slide out. Or we would have each individual part animate out in different ways.

For this example I would simply have the cross-hair fade out after the “flash”. Have the avatar slide down behind the alert (and fade out). Then finally have the frame slide out. We’re keeping it simple yet effective.

Construction

So far we haven’t actually animated anything. We just have these ideas over what would be nice to have.

I do most of the design in Photoshop. So most of the things from the design structure I export directly as PNG files. While it is possible to create certain things from pure CSS. For instance in our example we probably could create the cross-hair with CSS. Or we could even create it using an SVG. That way we can use that as clip path and then add animations on top of that. However that’s might be a slight overkill.

Code (animation)

Since we’re going to use CSS and HTML only. We will stick to using a alert.html and a alert.css file. My recommendation is to keep it all (as long as possible) in one alert.css file. It will make it slightly easier to do changes once we’ve put it into Muxy or Streamlabs. It’s not the best workflow when you’re working with websites, but where’ not working on creating a website.

The reason why we do it like that is so that we don’t need to copy and paste from two different files every time we have to make a small change, update or fix. I’m sure that I could change that workflow to better work with more than one CSS file. But for now let’s keep it simple.

CSS animations not built with frames but rather in seconds. However when it comes to creating the animation it self it’s called keyframes. These keyframes are controlled with percentages. That means that at 0% we have one state, at 50% another and at 100% we have our final step.

For each animation that we want we need to add more animation classes and keyframes. This is the basic of working in CSS animation. So keep in mind that you might be used to timelines. While you can think of CSS animation as such you need to visualize it in your head. So for our example it would probably end up be between 7 and 9 different animations that has to be coded.

This is sort the big leap one has to take when working in code as a designer or doing it yourself. It can take awhile but all of a sudden everything will start to make sense and you’ll no longer see code but rather see the design and animations happen in front of you.


I know this isn’t an in-depth “how to” that you might have wanted about animated Twitch alerts. However I did want to put this out so people can understand what CSS animations are and how they can apply to animated Twitch alerts. I do however want to eventually start a series on exactly how to create an animated Twitch alerts from start to finish.

If you liked this article you should check out my Twitch branding services. I have projects involving animated Twitch alerts that you can check out.

About the author

Daniel

Daniel

Do you need Twitch branding done the right way? I've work with both partnered and non-partnered Twitch streamers and done so for over 4 years. For me this is full time and I'm dedicated to my clients and my craft. I do both branding, visual branding and brainstorming based on understanding you, your community and your channel. If that sounds interesting to you then you should check out my Twitch services/portfolio/client list and contact me right away. twitch.livespace.se

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close