I found that if you use “margin-left” for the keyframes it gives you this interesting effect. I don’t understand the JS enough to work out why it’s making the line of text expand outwards from the middle.
@elusien, a question - is there a way I can see what effect the JS is having on the HTML (ie be able to see how it’s converted the html to the spans etc)? I’ve heard about console.log but I have no idea how to apply it in this case. Thanks!
J’ai trouvé que si vous utilisez “margin-left” pour les images clés, cela vous donne cet effet intéressant. Je ne comprends pas assez le JS pour comprendre pourquoi la ligne de texte s’étend vers l’extérieur à partir du milieu.
@elusien, une question - existe-t-il un moyen de voir l’effet du JS sur le HTML (c’est-à-dire de pouvoir voir comment il a converti le HTML en étendues, etc.) ? J’ai entendu parler de console.log mais je ne sais pas comment l’appliquer dans ce cas. Merci!
D’OH!! I should have realised that!! Well done @namna!
My amateur theory for this code is that we cannot animate any movement of the actual characters but margin-left works because it affects the positioning of the character within its background container-thingy. I could be wrong!
D’OH !! J’aurais dû m’en rendre compte !! Bravo @namna ! Ma théorie amateur pour ce code est que nous ne pouvons animer aucun mouvement des personnages réels, mais la marge gauche fonctionne car elle affecte le positionnement du personnage dans son conteneur d’arrière-plan. Je peux me tromper!
Sorry Jon, I’ve been really busy this last couple of days. The Brexit chickens are all coming to roost here in Cyprus and I’ve been taking advantage of my fanancial advisor’s visit to his Cyprus branch to sort out my finances, since my previous IFA can no longer service clients resident in the EU.
To see what is going on with the Javascript you should click in the browser window and press the function key F12, which toggles the “development tools” on and off. Click on the “Elements” tab to see the properties of each HTML element. This tool is invaluable to see exactly what the properties are, especially as you animate them.
Remind me again what you want to achieve? I understand the bit about the text being centered. Do you want each character to fly in from the left/right and if so in which order?
@jonray
J’avoue que je suis aussi perdu que vous.
L’exemple que j’ai publié plus haut, je l’ai fait à partir d’un de vos fichiers “Flipspin” que vous aviez publié il y a quelque temps.
Les Keyframes ne s’écrivaient pas de la même façon, il y avait des translateX, dans les window.elusien_keyframes et des
@jonray
I must admit that I am as confused as you are.
The example I posted above, I made from one of your “Flipspin” files that you had published some time ago.
The Keyframes were not written the same way, there were translateX, in the window.elusien_keyframes and
The text is centred. Each span initially start with a left-margin of -10px, so characters are really squeezed together, stepping on each other’s toes. Then you animate the left-margin to 0, which means they start to move apart from each other to give each span breathing space, hence the line as a whole expands.
No worries - you indicated that you were having a very busy few days. Hope you can now get to relax a little!
Remind me again what you want to achieve?
OK, you kindly worked out some code which animates the “subtitle” text in the example above. Then @namna wondered how to achieve the letters flying in slightly from the left.
I’m also wondering if these subtitles could also be animated in lots of other ways, too (see this folder for a few examples I made - these only work with one-line text)
… including animating the movement, scale and rotation etc…
As it stands it seems difficult or impossible to animate the position and rotation of the letters, (until I found out that the “margin” animation works).
Also, the timings are difficult to change, too. What I would like to do is to be able to vary the timings of:
the duration of the subtitles (having a global duration for every line is fine because I could then chop the clip in Shotcut to synchronise subtitles to the song lyrics)
the speed at which each letter appears (delay)
the delay (or advance) when the next subtitle line appears.
Hope this makes sense.
[EDIT] - sorry, my post has overlapped with your reply …
All things are possible. Javascript is definitely the way to remove the calculations from CSS. We are out to dinner shortly, but I can start redesigning it to be more parameterised tomorrow, hopefully.