Wow, that took a bit of effort. I’ve now fixed it, but the changes are too many to list here, so I have edited my post #10 to make it download the corrected HTML file. Just click on the link there, or here:
Starship_Enterprise_mishap.html.txt (17.7 KB)
Works perfectly now. Thanks!
Having seen your example I added a couple of new parameters for people to choose. These are:
--box_shadow : inset 0 0 3px #ffaa00, inset 0 0 6px #ee8800, inset 0 0 9px #dd7700; /* Set this to the word none to get rid of 3-D look */
--slider_color : #ffcc44;
--tile_color : white;
--text_color : black;
--font_family : 'Roboto Mono', monospace;
I have edited post #1 to download the edited HTML file. It can also be downloaded here:
slider.html.txt (18.0 KB)
Après avoir vu votre exemple, j’ai ajouté quelques nouveaux paramètres à choisir.
J’ai édité le post #1 pour télécharger le fichier HTML édité. Il est également téléchargeable ici :
C’est sympa, ça m’évite de vous le demander.
Pour info, j’ai aussi modifié la ligne +/- 374 pour que la taille du texte soit fonction de la largeur de la tuile plutôt que la hauteur.
if (P.font_size !== 0) { style.setProperty('--font_size' , 1.5 * P.tile_width.ivalue + 'px'); }
It’s nice to not have to ask you.
For the record, I also changed the +/- 374 line so that the text size is based on the width of the tile rather than the height. 
Your code is not quite right, but the mistake was in my original code. I have corrected the downloadable file in the earlier posts. The test should be:
if (P.font_size.ivalue === 0)
Votre code n’est pas tout à fait correct, mais l’erreur était dans mon code d’origine. J’ai corrigé le fichier téléchargeable dans les messages précédents. L’épreuve doit être :
This is so cool.
In my demo I split the screen capture (Sharex) into three:
Beginning - speed x1, main section - x3, end (last tile) x1 to give a faster effect of the main animation but keeping the beginning and end slow.
I also exported the first frame to give just over a second showing the first frame.
So being picky, it would be good to have control over these speeds via the HTML … 
Congratulations @elusien, as ever…
I also experimented a little.
I settled with rounded corners and a box-shadow. Same as in the text version, but different. And at the end I transitioned with the original image to make the grid disappear softly.
Like it!! The slow smooth fade-out at the end is perfect.
I have added a parameter for the delay after the tiles have spun in but before they slide:
--initial_delay : 1.5; /* Delay (in seconds) after tiles appear but before they start to slide */
Regarding the othertiming I’m a little adverse to yet another parameter. It is very easy though to change the code. The animation part of the code is relatively simple - this is the whole of it (line 390 onwards):
tl_1.set('.tile', {scale : 0, rotationX: 360, rotationY: 360, rotationZ: 360}, '>');
tl_1.to ('.tile', {scale : 1, rotationX: 0, rotationY: 0, rotationZ: 0, duration: 10 * P.animation_duration.value}, `>${P.animation_delay.value}`);
tl_1.set({}, {}, P.initial_delay.value);
slider.reverse_play();
tl_1.set('.empty', {scale : 0, rotationX: 360, rotationY: 360, rotationZ: 360}, '>');
tl_1.set('.empty', {backgroundImage: P.image.value}, '>');
tl_1.to ('.empty', {scale : 1, rotationX: 0, rotationY: 0, rotationZ: 0, duration: 10 * P.animation_duration.value}, `>${P.animation_delay.value}`);
tl_1.set('.tile' , {border: 0}, `>${P.animation_delay.value}`);
To slowdown the spinning-in relative to the tile-sliding change line 391, e.g. to slow it by a factor of 2 change the line to
tl_1.to ('.tile', {scale : 1, rotationX: 0, rotationY: 0, rotationZ: 0, duration: 2 * 10 * P.animation_duration.value}, `>${P.animation_delay.value}`);
Regarding the slow-fade of the grid-lines as done by @MusicalBox , it is not really possible for me to do as they are borders of width 1px. I cannot really operated on these independently other that to make them disappear, or change colour.
The HTML files for downloading in the posts above have been updated.
That’s great, thanks @elusien.
I tend to agree! Could get a little complex. Thanks for the amended code though.
OK I can imagine you sobbing into your soup, so I added a couple more parameters:
--tile_intro_duration: 2.5; /* Duration (in seconds) that the tiles take to appear at the beginning */
--stagger_from : ; /* one of the following: [empty], start, end, center, edges, random, or a brick number like 13 */
--axis : ; /* one of x, y, [empty] for the GSAP stagger */
Try experimenting with the “–stagger_from” and “–axis” parameters to get some fancy appearances for the rotating tiles. GSAP makes these animations extremely easy to achieve.
HTML files for download have been updated in the posts above.
P.S. if you want to see the changes made to the file you can use WinMerge on Windows:
Wow, that’s great, @elusien, thank you so much… Actually yes I have been sobbing into my soup, but only because England got beaten by the mighty France in the World Cup quarter-final… Boo hoo 
. Terrible referee … he should have given us another penalty earlier in the match… (I expect @namna will disagree)…
Anyway, a grudging congratulations to the French. Now I hope they go on to win…
Never seen or heard that expression 
After a bit of research I suppose it is the equivalent of “se plaindre le ventre plein” (to complain with a full stomach) that us French Canadians use.
Je viens de rentrer d’un week-end prolongé à Vienne qui m’a empêché de voir ce fameux match Angleterre-France.
Lequel méritait de gagner ? Je ne sais pas, je n’ai pas vu.
Personnellement je ne juge pas la qualité d’une équipe au nombre de penalties marqués, les buts marqués dans le cours du jeu ont pour moi plus de valeur.
I just came back from a long weekend in Vienna which prevented me from seeing this famous England-France match.
Which one deserved to win? I don’t know, I didn’t see it.
Personally I don’t judge the quality of a team by the number of penalties scored, the goals scored in the course of the game have more value for me.