Resource icon

Free Animated lower thirds with control panel 2020-04-12

1. Unzip the file.
2. Add control panel: View/Panels/Browser panels. Add title in left column (ie. "Lower thirds"), put a path to file "lower thirds/control-panel.html" from the extracted folder into right column. Click "Apply" and close window. You can dock the panel between existing panels.
3. Add new browser source, pointing to file "lower thirds/browser-source.html". Set width to 1920 (or any other you use for streaming).
4. You can use predefined list - just click on the name - or type new data on the fly, then show them by clicking "Show". You can edit predefined values in "control-panel.html" file. Also you can change the logo. Basically, you can change everything, cause it's just a bunch of CSS lines :)

Tested only on PC, OBS 25.0+. I hope it'll run on Mac and Linux too.

It's just a working proof of concept, but works OK. I use simple transition, but you can do your own template and animate with CSS transitions, keyframes or whatever you want. For communication between control panel and browser layer I use BroadcastChannel API.

Panel color scheme is for OBS "Acri" theme, you can set your own colors in common/css/style-001.css (:root section).

Of course, there's a room for improvement: locked top panel, template system, animated SVG's as icons etc.

As a little bonus you can add clock by adding "clock-digital-1/index.html" file as browser source. I'm working on news ticker with the same panel idea as lower thirds, so stay tuned :)
Author
from1975
Downloads
21,026
Views
60,950
First release
Last update
Rating
4.70 star(s) 20 ratings

Latest reviews

Excellent work! Simple and functional, easy to customize.
Thanks for putting this plugin together.
Only works on Windows because the custom browser docks feature is only available for Windows, but the plugin is very nice, works very well. A Github repository is missing to accept pull requests, I already made some changes but there is no place to pull to.
Lovely. Although when I start OBS, the logo is showing up while I would do in a way that's not shown.
Thanks, simple and customizable solution. Have been looking for something like this!
There is no Panels option in view option.
Plz help me
Excellent! Installation was simple and the CSS was easy to customize.
Great plugin for lower thirds. Definitely customizable. You do need to know CSS to modify it beyond its core presentation. But it checks the boxes for me. Now I'm off to read up on CSS
Very useful resource. Thank you very much for this.
Great resource! Thank you for producing and sharing it.
Excellent Plugin took me less than 10min to figure it out, and the fact that itis fully customizable makes it awesome.
Top