Elusien's video title (GSAP) - my demo and question

[jonray]

This is a question for @elusien - I’m trying to make a video title for another of my flute music videos using your fantastic GSAP title generator:
http://www.elusien.co.uk/shotcut/resources/index.html#section_8

My question is, can I set the font-size of the subtitle independently to the font-size of the main title? There seems to be only one font-size attribute and the subtitle is coming out way too large. I notice the subtitle text comes in between tags named “small” but it would be great to be able to set the fonts independently if this is possible…
Here’s what it looks like. Main font is Gloss and Bloom, sub font is arial. Thanks, @elusien!!

https://streamable.com/8qi8u8

[Elusien]

@jonray, you will have edit the final HTML. Change the <style> section to:

<style>
  body       {visibility: hidden;}
  #sub_title {margin    : -40px 0 0 0;}
  .ss        {font-size : 0.5em;}
</style>

Play with the -40px and 0.5em until you get the effect you are looking for,

[jonray]

Thank you @elusien. Unfortunately though it made no difference . I’m trying to understand the style code. Should there be a div with class “ss” somewhere? Sorry to be a pain- I hope I’m not holding you up from diving into your pool…

[jonray]

PS no rush!

[Elusien]

Jon, my fix worked for me. If you post your HTML file (with a .txt extension) I’ll have a look at it for you.

The “.ss” targets the <span class=“ss”> tags which are generated by the Javascript.

Here is an image of the result (Text:HTML Shotcut v20:07.11)

[jonray]

Thanks a million, @Elusien . I’m probably doing something obviously wrong …
FLUTTERBIES 01 TEXT effect.txt (4.7 KB)

[Elusien]

Jon, no you aren’t doing anything wrong. You are using TYPE=1, which different from all the other TYPEs. It is the only one that does not have <span class=“ss”> elements, since they are used to animate individual characters and TYPE=1 only animates complete lines.

Just change the ‘subtitle’ line of code to:

<div id="sub_title"><small><span class="ss">A piece for flute and piano</span></small></div>

i.e. put the text inside a <span class=“ss”> element. Then play around with the -40px and the 0.5em.

[jonray]

Great, thanks, @elusien. I’ll try that!

[jonray]

Brilliant brilliant brilliant. Thank you thank you thank you @elusien

"Flutterbies" - a short video title made with Shotcut using Elusien's GSAP Revealing Text utility

How I did it:
Place a nice butterfly photo on track V1 (Shotcut).
Go to:

Resources for Shotcut

(follow instructions to create a HTML file. Make sure it has white text on a black background).
Double-click to open the HTML file in Chrome.
Take a screen capture of the whole screen using ShareX or OBS.
Save as an MP4.
Import the screen capture MP4, place on V3.
Trim as necessary and apply a crop:rectangle filter to isolate the design.
Apply a Blend Mode filter and select “add”.
On V2, add a black colour clip.
Re-size using the Size Position and Rotate filter (select “distort”).
Apply an Opacity filter to make it semi-transparent.
Apply a fade in and fade out to the clip.
Position the clips carefully to create the desired timing.
Place music track on A1.

[Elusien]

Glad you got it to work. You shouldn’t have to go through hoops like that though, so I’ll look at updating the code to provide a subtitle font-size option.

[jonray]

@Elusien

I’ll look at updating the code to provide a subtitle font-size option.

That would be awesome!

[Elusien]

The app has been updated. Please download the file elusien_gsap_titles.js from the following webpage:

https://elusien.co.uk/shotcut/resources/index.html#section_8

You should also use the app to re-do any title-HTML files you have already created.

[jonray]

Excellent!