Twitch

Muxy vs Streamlabs Animated Twitch alerts

streamlabs-muxy

Streamlabs recently introduced CSS/HTML support for their alert box. This is a great move forward and something that’s been lacking for a long time. It’s also something that Muxy have had for a long time. No matter what this will allow you to create animated Twitch alerts. But how does the two services compare to each other?

As you also know I’ve been talking, and making, animated Twitch alerts using CSS/HTML and JavaScript with Muxy as the backend. That meant that those clients had to move over to Muxy (and StreamTip) to handle all of the alerts. Now I can offer them to either a combination of both (more on this later in the article) or even staying with Steamlabs.

I mentioned a combination of both, why? Simply put while they both offer CSS/HTML support dosen’t mean they’re equal in anyway (as the writing of this article). Let’s go over the differences and then look at what might be the best option for your situation.

Uncle Bonk Twitch Branding Animated Twitch Alert

Click above to see an animated Twitch alert.

HTML/CSS user interface

Muxy uses a tab system that separates out the CSS and HTML from each other. The positives is that you can keep it all separate and not end up with having to scroll through all of the code every time you have to need to find something.

For instance for my latest project the CSS codes ended up being 316 lines of code and the HTML was 44 lines. This allowed me to get a clear overview over my code instead of having to scroll up and down constantly. In Streamlabs it’s all in one place so if I needed to find something in the HTML I had to through the HTML or vice versa depending on your coding setup.

One of the downsides in Muxy is that when you click save the page refreshes and it puts you back at the top of the code. That means that I would have to locate where I were making adjustments in the code. In Streamlabs you actually stay at the same place when you click save.

While I do use Atom.io to code both Streamlabs and Muxy tends to handle the code a bit differently, probably due to that it’s adding the code to another page that already has code so keep that in mind.

Both services would benefit of being able to have both CSS and HTML in a split view.

Preview of animated Twitch alerts

The great thing about Muxy is that the preview actually loops for you. That means you can see the changes that you’ve made as soon as they appear. In Streamlabs you have to manually scroll up and test send the alert to get able to see any changes, and then scroll back down to adjust, change, add code.

Both services could benefit from having a way to easily change the background color of the preview image. While it is possible (and pretty easy) to change it with CSS. It would be a lot more helpful to not have to code it and then even forget to remove it (happened to me).

Why is that a good feature? Muxy uses a white background and Streamlabs uses a green (for green screen purposes), but what if my alert contains green or white? Then that won’t show up unless I change the background color.

Click

Click above to see an animated Twitch Alert

Image Support

While both Streamlabs and Muxy supports image upload to your own library. You can really only use one of the images using {image}. That works when all you’re using is one image but as soon as you need/want an additional one you’re starting to run out of options. You can still grab the URL from the image itself from the library it’s not that user friendly.

I tend to instead upload images for my clients to my own server and then link them in the HTML and CSS directly. Not the best work around but it works. I do of course include the source files when I send the package to my clients so they could host it on their own servers if needed.

A good way for this would be to allow to grab the URL easier for both Streamlabs and Muxy.

Video & Audio Support

Both Muxy and Streamlabs supports audio files. I’m unsure if Streamlabs supports video files but Muxy does. You can pull that video in by using {video}. This can help you create some really cool CSS/HTML combined with videos. I worked with Hashtag Mike to do exactly that by creating a alpha channel video that played with the rest of the subscriber animated Twitch alert.

While video support isn’t a service killer it would be nice if Streamlabs did include it as well.

Audio is, as mentioned, supported by both services but there’s no way to target the audio that you upload to Streamlabs. In Muxy you actually get it in a neat div and wrapped in {audio}. So in Muxy I can actually target it with CSS or even HTML to get it to behave how I want it to.

HastagMike Twitch branding

Click above to see an alert with video in it

Entrance & Exit Animation

While this probably don’t sound that important I’ll explain why you should care.

When an animated Twitch alert comes on screen it does an initial animation, from it being a a fade in, slide in or slide up it does another one once it exits. This is great when you want to have something simple and easy to select. However in most cases (all actually) I have different types of entrance animation where perhaps one thing grows in from 0 size to 100. I don’t want it to slide in or fade in.

Muxy allows you to select so that you don’t need to have any animation and it will instead go on the animations that you’ve defined in your CSS. Streamlabs on the other hand only supports their own entrance and exit animations. That means that the animated Twitch alerts has to do one of those animations before your animations.

You can offset this by adding in a delay on your animations. But that also makes delays your entire animated Twitch alerts for a few milliseconds. And as we know we can’t delay the audio or effect the audio  in Streamlabs without using JavaScript

Until Streamlabs allows you to have no animation for the entrance and exit I’m always going to recommend Muxy.

CaptainRoBear Twitch Alert

Click above to see an animated Twitch Alert

Amount of Alerts and Conditions/variations
Animated Twitch Alerts

19 different alerts in Muxy

With Streamlabs you can have one alert per account and per alert type. That’s enough right? Well what if you want to have variations? Or what about different conditions? And even IF you want to have variations those are random with SteamLabs, that’s fun… but is it functional in all situations?

Muxy allows you to create and endless amount of alerts. For instance for a recent client I have 19 different animated Twitch alerts for subscribers. That covers variations for new sub, resub and subs depending on tier (one for each of those). With Streamlabs I could create one… but Streamlabs has variations right? They do! They also don’t support CSS/HTML and they’re more for smaller variations than adding images or different animations.

In Muxy I were able to change animations and change images for each of those 19 different subscriber animated Twitch alerts.

With Muxy I could even add in an animated Twitch alert if someone is a Prime subscriber or even a GameWisp subscriber.

Also nothing stops you from  having your donation alert with Streamlabs and using Muxy for the ability to  have variations. However until Streamlabs allows you to have more than one animated Twitch alert per instance I’m always going to recommend Muxy.

Exporting Alerts

Muxy allows you to export alerts with one click. However has that link can then import all of those alerts directly into their own Muxy account. While this isn’t a feature that most streams will use it’s vital to my workflow at the moment.

Final Verdict

Muxy takes it. There’s really no question about it right now. I think it’s great that Streamlabs finally have decided to add it they still lack a lot of functions that will make it comparable with Muxy.

There’s of course a lot more to a service than the CSS/HTML support for animated Twitch alerts. You might like the other features that comes with Streamlabs or Muxy. You might like the tipping services that Streamlabs has or maybe you like the one that Streamlabs has (StreamTip). I would say try them both out and see what works the best for you and your stream.


Are you looking for your own CSS/HTML animated alerts? Then you should check out my Twitch Branding Services where Animated Twitch 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