If there is one boat I miss not having sailed upon, it’s the Adobe (né, Macromedia) Flash period of the web. During its peak adoption, I was working for a small web development company and was personally responsible for a lot of site layout tasks, but we had one employee who specialized in Flash that was used for some (at the time) cool and cutting edge interactive animations. In 2019, Flash has become a very dirty word in the online business, having been superseded by javascript, SVG, and other more native technologies that don’t require a third party to stay on top of their plugin’s security situation.

Flash is still around — now called Adobe Animate — and in some ways After Effects shares a lot of DNA with its shamed sibling. It’s still cool to work with AE, though, but the one aspect of the tool that I wish survived from Flash’s heyday was the ability to make animation changes in response to external stimuli. As a developer, I can always come up with reasons to feed data to animation for representation (my trader space game is a perfect example), but modern web animation methods are so code-heavy that it sometimes seems like a step backward in usability.

I managed to find some respite, though, in the form of a javascript script called Lottie. Lottie allows you to run a JSON-represented animation in a web browser. You can generate this JSON by exporting an AE project via a plugin called Bodymovin. Using javascript alongside the Lottie implementation, we can alter the JSON before it’s used to render the animation, which allows us to replace content in real-time. Because the JSON that Lottie uses is still very verbose (especially for complex animations), we’re not talking a wholesale re-write of the animation after it’s been exported, but we can perform text replacement, for example, which is a massive boon when it comes to creating animated alerts for live streaming.

See the Pen Bodymovin Editable Text Demo by kittons (@airnan) on CodePen.

Right now, it’s possible to use AE animations with a service like Streamlabs to offer alerts that are triggered by certain events like a new follower, a subscriber, or a raid. While doable, replacing the content with a name or an amount raised by the streaming service event system is technically impossible; the best that can assume is that the alert designer will have carefully identified the coordinates of where text needs to appear, and then use javascript to create a new element that is overlaid on top of the movie. It’s a terrible hack which is painful enough when the replacement text is straight horizontal, but if the replacement text is intended to be at an angle or along a path, then the real javascript skills need to be brought to bear in order to accomplish something that would take only a few seconds of hand design in After Effects.

Lottie and Bodymovin aren’t perfect, and there’s a lot of AE effects that they cannot handle, but for a simple animation that relies more on design aesthetics than piles of motion graphic adjustments, it’ll do the job just fine it seems. I’ve only run a few tests (and had I planned better I’d have them here to show you) but all of the pieces are present that point towards being able to use this system for a more native dynamic alert system for live streaming.