Case Studies

Case Study: Toez Gaming Animated Twitch Alerts

Toez Animated Twitch Alerts

As you’ve probably seen recently is that I’ve started to do a lot of custom animated Twitch alerts. Those that have been reading this might also know that I’ve worked with Toez in the past. However back then we didn’t do any animated Twitch alerts. We once again linked up to create the new Toez gaming Animated Twitch alerts.

Brief

The brief was to take the current GI Toez brand — that I created — and add in custom animated Twitch alerts. Since there’s already a brand it does make things a bit easier.

There was already some alerts created. Me and Toez decided to use those and add animations to them instead of creating new alerts with new animations. That does of course cut down on the workload and cuts down the investment somewhat.

Video vs CSS?

What you might see some top streamers have are video alerts (webm) with a “text layer” where the name and other text sits. You might think that “why not copy their setup?”. The reason is simple. It’s not cost effective and it’s not flexible. When you have a video then that’s it. There’s no easy changes or quick modifications and you can’t really make changes on your own. You can even say that you’re stuck with the motion graphic designer if you ever want to make any updates to your animated Twitch alerts.

When you have a CSS animated alert it’s all code. You can actually see the code — both the HTML and the CSS that’s used. There’s no need for After Effects or video editing program to make simple changes. All you truly need is a regular simple text editor.

It allows you or me to change the images or animations on the fly. What might take a few hour to edit and render and then re-render and then upload and then implement. Instead with CSS/HTML can take as little as changing a few lines of text and you have a new alert. This is the true benefit of using CSS is that flexibility and how cost effective it is.

Animation

To create the animations I’m using animista and keyframes to adjust how they look. As you can see they have a lot of different animation going but they’re all staggered in over time as to create a fluid animation.

First we have a rotation on, followed by two slide ins (one from the top and one from the left). As those start I also added in another div with a box-shadow that has no height. That way it creates a illusion of a glow and I then animated that glow by adding a flicker CSS animation. I used a similar flicker animation (but with different keyframes) for the skull logo as well.
Animated Twitch alertsAnimated Twitch alertsAnimated Twitch alertsAnimated Twitch alerts


Are you looking for your own custom animated Twitch alerts? Then you should check out my Twitch branding services (where of course custom animated alerts are included).

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