Resource icon

Free Animated Lower Thirds with Dockable Control Panel v.1.6

Animated Lower Thirds
Animated Lower Thirds with dockable Control Panel - OBS Tool

Description
With this tool you can use a control panel to add and change your own lower thirds on the fly. Feel free to customize. Basic knowledge of HTML, Javascript and CSS is required. For communication between control panel and browser layer it use BroadcastChannel API.

This project is based on Lower thirds in HTML/CSS https://obsproject.com/forum/resources/lower-thirds-in-html-css.928/, and Animated lower thirds with control panel https://obsproject.com/forum/resources/animated-lower-thirds-with-control-panel.922/.

Features
  • Include dynamic content to streaming app with browser support (like OBS)
  • 4 differents Lower Thirds at the same time
  • 10 slots for each Lower Third (Same configuration but with different title, description and logo)
  • 3 predefined styles
  • Highly customizable (colors, fonts, timing, automation, ...)
Installation
  1. Download the Zip file, unzip it.
  2. See how to install and new features: https://youtu.be/tddMYWya7O0
Requirements
Unfortunately, OBS doesn't support browser panels on MacOs. It only works on Windows. And can be used on Linux using the snap installation. More info: https://obsproject.com/forum/thread...with-most-of-the-plugins-and-features.137672/

Usage
See previous features:

See v1.5 features:

Contributing
I am a designer and my scripting knowledge is few. I made this tool (Frankenststool) because I needed it and I want to share it. You are welcome to improve it. I am aware that many parts of the code can make any expert cry. I'm really sorry :P

Donations
If you like the extension and you want to support the development - please consider to donate by Paypal. Any donations are greatly appreciated.

License
The Animated Lower Thirds source code is made available under the MIT license.

Screen.jpg
Author
NoeAL
Downloads
427,352
Views
600,041
First release
Last update
Rating
4.75 star(s) 97 ratings

Latest updates

  1. Style 3, more customization and better CPU performance.

    Hi everybody! First of all, I would like to thank those of you who have contributed to the...
  2. Logos and Backups!

    Hi everybody! First of all, I would like to thank those of you who have contributed to the...
  3. Custom Fonts, Autoload, Tooltips, and more

    Hi everybody! Thank you for the positive reviews and comments! Video...

Latest reviews

The plugin works very well on macOS, it's a personalized internet dock. Follow videos on YouTube to learn how to install it. I followed this video to install it on macOS (https://youtu.be/watch?v=mjSWHPB7Iiw)
The .lua script works well, I can find all the hotkeys in OBS' setting window.
To have access to your logos in the plugin, they need to be placed in the same plugin folder. Move the plugin folder to somewhere you know it can't be moved or deleted, otherwise all links will be broken.
Have fun, great plugin 5 stars!
To make logos work, they have to be in the logos subfolder of the plugin.
Do NOT use these methods in these videos above! It will fail.

Maybe that worked for older version, but not with version OBS 30.
Go to the YouTube video entitled, “How To Create Obs Lower Thirds For Your Video Content In 2023”. USE that method for install and setup!

You will discover the correct “Properties for Lower Third” (Browser) is something like this: file:///C:/Program%20Files/obs-studio/Animated-Lower-Thirds_1.6/Animated-Lower-Thirds/lower%20thirds/browser-source.html

Now the Circle around the lower third box will turn BLUE! NOTE that you had this type of string: "file:///etc..... Otherwise it will not work!

It will now work!
Brilliant plug-in!
Nice Plugin!
Can't get custom fonts to work properly though. :(
After adding it only shows the first Letter of the input name and doesn't change to the respective font but uses a standard one.
Also would like to have the logo option on a centered Lower Third.
Other than that great plugin! :)
Trying to get it working in Mac OSX 14.2 . Having difficulty where to install the plugins or files
Unfortunately, I am not able to run it in OBS studio, please help
I've been looking for something just like this for so long! I absolutely love it and thank you for the hard work and effort that took to make it.
Nice work! For those who asking about logo, make sure you put the logo into the right folder (Logos folder)
Hello, may I ask if I can't display logo normally when I upload logo in png format and jpg format? What is the problem? Size 200X200
Top