Skip to page content and links

Tools

Customizable Lower Thirds Template Library

A library of customizable animated lower thirds for Telestream's ScreenFlow and Wirecast, built in After Effects with expressions and exported as Lottie.

Client: Telestream

Telestream / Lower thirds / 2020

Lower thirds you can retype.

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.

The brief

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.

The build

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.

The constraint

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 delivered experience

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 →

Project media

Dynamic lower thirds — live demo

Pick a lower third, type the name and title, change the colours: the Lottie updates live.

FINAL

Telestream Lower Thirds · Animations · FINAL

LT1

Telestream Lower Thirds · Animations · LT1

LT2

Telestream Lower Thirds · Animations · LT2

LT3

Telestream Lower Thirds · Animations · LT3

LT4

Telestream Lower Thirds · Animations · LT4

LT5

Telestream Lower Thirds · Animations · LT5v1

LT B-6a

Telestream Lower Thirds · Animations · LT B 6

Have a project in mind?

Explore motion design and interactive animation services, or get in touch about your project.