Going to make this a quick little case study. Mainly since I’ve been sick since Monday… like really sick. Getting better now. I still ended up doing some work. I’m still not fully recovered and still have one hell of a cough.
LeeGotGame is an enthusiastic and interactive streamer that has a lot of focus on on his community. He also already has a brand for his LeeGotGame.
We did share some thoughts on his brand and what he does as it was interesting to get a glimpse into what he does. We talked about things he had already implemented and a few things that he intended to implement. I gave my thoughts and ideas around that so he could proceed with the most knowledge possible.
The brand that LeeGotGame has is on the surface a freehand and rough. However once we dig deeper there’s a special structure to the chaos. This aspect is something that we got to during our earlier conversation. That’s why those early talks are so important. While they might sound as they’re arbitrary they are the core of creating something that can fit the rest of the brand properly.
Above you can see all of the alerts that were created for LeeGotGame. These are all CSS animation with HTML layout. The images you see above are not mockups but how they actually looked once the CSS and HTML had been applied.
As you can see I used the logo that LeeGotGama already had. He allso provided a pattern that I used as the background image. I then hand drew a few extra lines, check mark and arrows. I then used HTML to structure up the alerts. Used CSS to give color, style and positioning. Did some CSS hacking to get it all to line up properly. For instance it were important that both the number section and the name section could grow with either amount or length of name.
Once I had it all in place I started to work on the animations. These animations I had already figured out before hand in my mind. I had also shown my ideas to LeeGotGame so nothing came as a surprise. I did have to do some minor modifications that just weren’t possible with CSS and the functions that were needed. While CSS is powerful it also has it’s limits at times. I do still rather work with the notion that everything is possible while I work in Photoshop and then adjust later if needed.
I knew that I wanted to create something that would hit. Meaning that I created a custom animation that makes the alert parts shoot in and then shake. Giving it a earthquake or stomp feeling.
Working with CSS Animated Twitch alerts is super fun. I’ve been doing more and more of them as of late so you’ll get to see more of that in the future.
If you’re looking for your own CSS animated Twitch alerts don’t be afraid to reach my through my contact form.