Responsive Motion Graphics Templates
I recently created a set of fully responsive motion graphics templates (mogrts) for Webflow's team to use in their video content. I worked in After Effects and JavaScript to build lower thirds and end cards that can be customized directly inside of Premiere Pro by other editors at Webflow. All of the customization options within Premiere are easy to use (e.g., a checkbox to switch between light and dark mode) and everything is completely responsive to customization (e.g., lower thirds resize in response to longer/shorter names, titles, and companies).
Keep scrolling for more details
First, responsive centering
I built this end card that can be used for Webflow’s various subbrands, events, and affinity groups. I used JavaScript to make the animation start and end centered, regardless of the length of the text. In Premiere, editors simply need to type the subbrand text they want into a text field, and all the animation happens behind the scenes.
Up next, responsive shapes
I used After Effects expressions (JavaScript) to create lower thirds that scale based on text length while staying locked in the correct position. The lower third on the right is also connected to a checkbox, so it can be turned on or off depending on whether or not there are two people onscreen.
Lastly, dark mode
Here you can see that I connected some layers (the CTA text and the logotype, in this example) to a checkbox that toggles between dark mode and light mode.