HTML lower third template for learning


I needed a HTML template for demo purposes and I browsed the forum for clues on how to make one. I found alot of outdated information but I hope that this template is up-to-date for the current 2.1 version of CasparCG.

I've used parts of code/ideas found here on the forum. The idea for the lower third was copied from a videohive After Effects template because I needed something to follow when fighting the css to behave as I wanted :) The code has comments so you should be able to follow what is happening.

When playing a HTML template in CasparCG the update function is called before play so just take that into consideration when making templates. I had problems with using css @font-face because there is a delay between using the font and when I can measure the width of the text. I now use a 40ms delay so if you have a better solution I would like to hear about it.

Youtube video of template in use

Template can be found here

UPDATE 02.03.2017 15:48 GMT+2:
-Template is using Greensock JS for animation
-The font is from Google Fonts
-The template can be called without any parameters (displays example content).
-The template can be loaded into Chrome for debugging (uncomment debug section in code) + you must use update before play. When using stop the webpage must be reloaded to use again.
-The template is controlled as a flash template no CALL calls are needed (unless you need to call your own custom function CALL 1-10 "CustomFunction('hello!')" ).

Who is online

Users browsing this forum: No registered users and 1 guest