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.
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.
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.
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).