I adapted the technique for four lines of text by creating (screen capturing) each animated line separately and stacking the 4 tracks vertically in Shotcut, applying Blend Mode: Hard Light to each track, and positioning each line with the SP filter.
Here’s a quick EXTRA demo I made to further highlight this technique. Took about 6 minutes:
When I have time I’m going to explore the possibility of tweaking the HTML file so it makes four lines automatically, not just one. I’m sure it can be done. My brief would be for each of the four lines to :
be spaced vertically evenly on the screen,
have the letters of EACH LINE start appearing randomly from the beginning (not each letter from the whole four lines of text which would take too long),
Jon, I tweaked the HTML to handle multiple lines and center vertically and horizontally, using “display: flex”. I’m not sure about requirement 2) though. If the lines contain widely different numbers of characters, I think that would not look too good (e.g. a line of 3 characters would fully appear almost at once).
WOW! That is incredible! As it happens I tried to tweak it myself, not really knowing what I was doing. You can see this from my amateur attempt: (PLEASE NOTE, THIS CODE DOESN’T WORK. I’m just posting it for @elusien’s interest and to give him a laugh)…
Excellent. Thank you. Can I be a complete PAIN? About the no. 2 thing: ( having the letters of EACH LINE start appearing randomly from the beginning (not each letter from the whole four lines of text which would take too long), -
is this possible?
I still think the letters appearing in your code take too long to appear.
However, the letter-spacing is all wrong, and I completely don’t understand why the red box of line 4 is so vertically short…
You will no doubt be able to sort it out in the blink of an eye …
Thanks again, @elusien No worries if you don’t have the time to do this.
I wish I could claim all the credit, but things like the “shuffled” function can be fairly easily discovered with a quick Google search, although I did modify the code to tailor it to your needs.
Encore une belle vidéo de @jonray et un nouveau fichier html d’ @Elusien à conserver précieusement. J’ai essayé de comprendre le code, jusqu’aux keyframes ça va, j’ai même pu ajouter des déplacements horizontaux et verticaux. Par contre le dernier script reste encore un mystère pour moi. Voici mon fichier modifié. Lorsque les 4 lignes ont la même longueur, l’effet aléatoire n’est pas très aléatoire, les lettres de chaque ligne s’animent en même temps. Mais c’est un détail, dans la pratique on n’a pas souvent 4 lignes identiques. Merci et bravo pour votre travail.
Another nice video from @jonray and a new html file from @Elusien to keep.
I tried to understand the code, up to the keyframes it’s ok, I could even add horizontal and vertical moves. But the last script is still a mystery to me.
Here is my modified file.
When the 4 lines have the same length, the random effect is not very random, the letters of each line are animated at the same time. But it is a detail, in practice we do not often have 4 identical lines.
Thank you and congratulations for your work.
to give the animation timings - by the way that took me ages to work out and I punched the air when it worked!!
However, what I’d like to do is to be able to apply “span” animations (letter-by-letter) to these subtitles, not just having the whole line of text fading or moving.
I’ve tried lots of things with your JS code for the other recent animations but nothing I’ve done works.
Could this be done? I’m hoping that it will be a breeze for you to work out!
Only if you have the time of course! Many thanks!