My latest "flute" music video, "Sunset Over a Distant Horizon"

Thank you @jonray
But I must add something in the span CSS ? (or div CSS)

span {animation:    fade-in-fast calc(2.5s * var(--i) / var(--m)) 
                    cubic-bezier(0.1, 0, 1.0, 1.0) 
                    forwards calc((var(--N) - 1) * var(--length));  } 
1 Like

Hi @namna, at first I would say change the span to

 span {animation:    MOVE-RIGHT calc(2.5s * var(--i) / var(--m)) 
                cubic-bezier(0.1, 0, 1.0, 1.0) 
                forwards calc((var(--N) - 1) * var(--length));  }

… but I just tried it and it doesn’t work. I think we might need @elusien’s help…

Salut @namna, au début, je dirais de changer la durée en

 span {animation:    MOVE-RIGHT calc(2.5s * var(--i) / var(--m)) 
                cubic-bezier(0.1, 0, 1.0, 1.0) 
                forwards calc((var(--N) - 1) * var(--length));  }

… mais je viens d’essayer et ça ne marche pas. Je pense que nous pourrions avoir besoin de l’aide d’@elusien

1 Like

@namna and @elusien,

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.

I_will_survive MOVE RIGHT test.html.txt (3.8 KB)

@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!

@namna et @elusien,

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!

1 Like

Bravo @jonray on progresse.
Le texte s’étend du centre vers l’extérieur à cause de la ligne 39

text-align      : center;

Si vous remplacez “center” par “left” le texte s’étend bien de gauche à droite, mais la ligne n’est plus centrée.

Well done @jonray we are making progress.
The text extends from the center to the outside because of line 39

text-align: center;

If you replace “center” with “left” the text does extend from left to right, but the line is no longer centered.

1 Like

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. :smile: 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. :grinning_face_with_smiling_eyes:
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

timings: {duration:500, easing:"ease", delay:4280, iterations:1, direction:"normal", fill:"forwards"}

dans les window.elusien_animate

@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

timings: {duration:500, easing: "ease", delay:4280, iterations:1, direction: "normal", fill: "forwards"}

in the window.elusien_animate

1 Like

@Elusien
Nous cherchons à reproduire l’exemple que j’ai montré dans mon post 39

We are trying to reproduce the example I showed in my post 39

1 Like

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.

1 Like

Thanks for that. Try changing the line that says:

div  {animation:    no-movement 3.5s ease forwards calc((var(--N) - 1) * var(--length)), 

to:

div  {animation:    jitter 0.3s ease forwards calc((var(--N) - 1) * var(--length)), 

And add the keyframes:

@keyframes jitter{
    0%    { margin-left:   -20px; opacity:1; }
    100%  { margin-top:      0px; opacity:1; }
}

You may have to play around with the 0.3 and the -20px to get what you want.

2 Likes

Hi @elusien,

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)

https://drive.google.com/drive/folders/1WdnrfPJ67KavMNKn0ahZo1liWZc0ebmU?usp=sharing

… 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:

  1. 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)
  2. the speed at which each letter appears (delay)
  3. the delay (or advance) when the next subtitle line appears.

Hope this makes sense.

[EDIT] - sorry, my post has overlapped with your reply …

Also, for the animations to be specified in seconds, not just a calculation with variables… :smiley:

OK, merci beaucoup, cela fonctionne.
J’ai modifié le margin-top du jitter en margin-left
J’ai aussi modifié

shuffled = (Array.from({length: line_characters.length}, (_, index) => index + 1)); // from left to right

comme vous l’aviez dit précédemment.
L’effet obtenu est bon, reste à jouer avec les paramètres pour ajuster

OK, thank you very much, it works.
I changed the margin-top of the jitter to margin-left.
I also changed

shuffled = (Array.from({length: line_characters.length}, (_, index) => index + 1)); // from left to right

as you said before.
The effect obtained is good, it remains to play with the parameters to adjust

I_will_survive elusien.html.txt (5.4 KB)

As @jonray said, our requests are not urgent, we understand perfectly that your concerns are a priority

1 Like

Sorry that was a cut & paste without editing. Silly of me.

1 Like

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.

2 Likes

Wow, that would be brilliant. Top man! But as @namna says, it’s not urgent. I will allow you to go out to dinner :rofl:

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.