Mixer/Twitch “Going-Live” Scene using MoJS

I’ve been trying to learn motion graphics in my free time through programs like After Effects, which has been neat, but it’s definitely outside of my comfort zone still as far as getting the program to do what I want it to. I needed a “going live” screen for my steaming setup and realized that I could technically just build one in HTML, CSS, and JS (with the help of the MoJS library) then take the resulting webpage and add it to my streaming setup as a “browser source”, essentially leveraging the power of the web as a portal to show a motion graphic scene. While it’s not the smoothest and it gives a decent amount of dropped frames (preferably you’d want it to always run at 60fps, but it dips down to when re-rendering random elements), I enjoy that it’s easy to reach for tools such as CodePen which allow anyone to spin up a small development environment, code out some ideas, then turn around and use the result anywhere they want.

For example, here’s my “going live” scene, in its entirety. This is the same technology I then turn around and capture to display out via stream after beginning as sort of a buffer to allow people to join in before we actually begin– sort of like the introduction music to a podcast or show.

See the Pen Hrothmar + Motion JS by Dylan Baumann (@dylanbaumann) on CodePen.20900

Soon I’d like to build this in After Effects or a similar program so that I can ensure a smooth 60FPS for animation and call it locally from a file instead of reaching out over the web, but I waned to share this quick tip if you need something fast and are more comfortable with the web :D. The full pen can be found here, if you wish to fork it, prod, or poke it.