Dynamic lower thirds — live demo
Pick a lower third, type the name and title, change the colours: the Lottie updates live.
Tools
A library of customizable animated lower thirds for Telestream's ScreenFlow and Wirecast, built in After Effects with expressions and exported as Lottie.
Telestream / Lower thirds / 2020
My role: After Effects expressions, template design and Lottie export.
Delivered: A library of customizable animated lower thirds, as After Effects projects and Lottie JSON files, in series A through G.
Tools: After Effects, expressions, Bodymovin / Lottie.
Telestream was adding Lottie support for lower thirds to its ScreenFlow and Wirecast video software, and needed a large library of animated titles that its users could customize for their own fonts and text sizes. The client contacted me through Upwork in December 2020 for a designer experienced with expressions and Lottie.
I built the lower thirds in After Effects with expression controllers, so that changing the text, colors or sizing recalculates the layout, spacing and timing instead of needing keyframe edits. They are organised in series (LT A to LT G in the project folder), each in several variants, and exported to Lottie through Bodymovin. Work also included figuring out, with the client's developers, the technical details of how titles display in Wirecast.
Not every After Effects expression survives export to Lottie, so each template needed a parallel structure that behaves the same inside the subset of expressions Lottie supports.
The library was delivered to Telestream as After Effects projects and Lottie files across the series, over a longer engagement than the first contract. Telestream's own documentation, "Lottie files for ScreenFlow and Wirecast" (January 2020), describes the Lottie workflow these templates were built for.
Try the interactive lower-thirds demo →
Pick a lower third, type the name and title, change the colours: the Lottie updates live.
Telestream Lower Thirds · Animations · FINAL
Telestream Lower Thirds · Animations · LT1
Telestream Lower Thirds · Animations · LT2
Telestream Lower Thirds · Animations · LT3
Telestream Lower Thirds · Animations · LT4
Telestream Lower Thirds · Animations · LT5v1
Telestream Lower Thirds · Animations · LT B 6
Explore motion design and interactive animation services, or get in touch about your project.