Forum Discussion
User-side subtitle customization.
If you're referring to the built-in captions, what you're asking for is achievable with the help of JavaScript. You can create either a button or a slider version, where the font size changes accordingly when the buttons are clicked or the slider is moved. Below are some examples to illustrate how this can be done:
Slider versionButtons version
Yes, I would like to give it a try, can you help to write the JavaScript code and set it up? Thank you
Steps to Recreate the Slider That Dynamically Changes the Captions Font Size:
Step 1:
Create a slider with the following properties. Take note of the slider variable automatically generated by Storyline.
Step 2:
Create a custom text variable named fontSize and set its default value to 100%.
Step 3:
To reference and display the fontSize variable on the slide, type %fontSize% in a text box or insert it directly into the text box as shown below. (Skip this step if you don’t want the font size to be visible on the slide.)Step 4:
Create two triggers as follow:The first trigger is optional. It automatically displays the captions (CC) when the timeline starts on the slide. For the second trigger, click "JavaScript" and paste the code below:
const captions = document.querySelector('.caption-container'); let sliderValue = getVar('Slider1'); // Slider1 or whatever Storyline generated for you captions.style.fontSize = `${sliderValue}%` setVar('fontSize', captions.style.fontSize); // it updates the fontSize variable created in StorylineI am attaching the working version for reference, just in case I’ve missed anything.
Hi Nedim, can I copy the slider in all the layer and mantain the javascript for the size of cc? Thank you very much
Yes, you can. However, a few things need to be done to ensure that the JavaScript maintains a consistent font size across layers.
Let’s say you’ve added three more layers and copied the slider to each one. The slider names in the timeline will change, and Storyline will generate new slider variables, such as Slider2, Slider3, and Slider4.In the timeline for each layer, rename the slider objects to Slider2, Slider3, and Slider4 (this step is important for clarity and naming consistency).
Then, update the triggers as follows:If you’re on Layer 2, the JavaScript will be executed by moving Slider2. On Layer 3, it will move Slider3, and so on.
The most important thing now is to ensure that the font size and the slider value that controls it remain consistent across all layers. For example, if you move the slider on Layer 1 and set its value to 150 (which changes the font size to 150%), this slider value and font size should stay intact when you switch to another layer. To achieve this, let’s change the slider variable on each layer to 'Slider1'.
Lastly, make sure that each script on every layer references 'Slider1' in the slider value variable.
