Free resource - a set of Black and White (Matte) overlay videos for a revealing block effect

[Namna]

@Elusien

and also in versions of Shotcut that supported the Text:HTML/Overlay-HTML filter (you need to tick the box in the filter stating that you will use the webvfx javascript framework).

Merci d’essayer de coder une version pour webvfx.
Cependant je n’arrive pas à la faire fonctionner.
J’obtiens bien un rectangle noir (à l’échelle 0.5) mais pas d’animation des pavés,
(que je coche ou pas la case webvfx)

Cependant, elle fonctionne dans mon navigateur Chrome

Thanks for trying to code a version for webvfx.
However I can’t get it to work.
I get a black rectangle (scale 0.5) but no animation of the blocks,
(whether I check the webvfx box or not)

However, it works in my Chrome browser

[Elusien]

I’m terribly sorry. I somehow deleted 1 line in the code. It only makes a difference for the Text:HTML filter.

I have updated the version on the website. You could also just edit the version you’ve downloaded. Insert the following line as line 32:

var DEBUG = false;

so the code around it becomes:

	<!--script   src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script-->
	<!--script   src="elusien_gsap_webvfx_interface.js"></script-->
	<script>
var DEBUG = false;
var parameters = {

[Namna]

Thanks a lot, great, it works.
You are the best.

I’ll see if I can make an integrated UI to change the settings directly in SC.

[Elusien]

@Namna

I’ll see if I can make an integrated UI to change the settings directly in SC.

That would be great. It was on my list of things to do, but as a low priority as I have quite a few things to do this week and writing QML code is not my favourite pastime.

Ce serait génial. C’était sur ma liste de choses à faire, mais pas prioritaire car j’ai pas mal de choses à faire cette semaine et écrire du code QML n’est pas mon passe-temps favori.

[Namna]

Désolé mais j’ai relevé une anomalie.
Dans l’exemple ci-dessous, j’ai appliqué une couleur rouge à la grille pour bien voir le défaut et réglé l’échelle sur 1.0
La bordure extérieure n’apparait qu’en haut et à gauche.
Les pavés sont décalés par rapport à la grille.

Sorry, but I found an anomaly.
In the example below, I applied a red color to the grid to see the defect and set the scale to 1.0
The outer border only appears at the top and on the left.
The blocks are offset from the grid.

Je n’ai pas trouvé le moyen de faire apparaitre ou disparaitre la grille avec un fondu.

I didn’t find a way to make the grid appear or disappear with a fade.

[Elusien]

Oh! I must admit I never tried that and can’t think why it wouldn’t work. I’ll look into it in a couple of hours - I’m half-way through reorganising my sheds at the moment.

Oh! Je dois admettre que je n’ai jamais essayé cela et je ne vois pas pourquoi cela ne fonctionnerait pas. J’examinerai cela dans quelques heures - je suis à mi-chemin de la réorganisation de mes hangars en ce moment.

[Elusien]

@Namna I have fixed the problems (there were 2) and uploaded a new version to the website. The problems were originally masked by the fact that the borders were the same colour as the window panes when shut. I have tested it, so please download the new version and check that it works for you. Let me know if you get any other problems.

@Namna J’ai corrigé les problèmes (il y en avait 2) et téléchargé une nouvelle version sur le site Web. Les problèmes étaient à l’origine masqués par le fait que les bordures étaient de la même couleur que les vitres lorsqu’elles étaient fermées. Je l’ai testé, veuillez donc télécharger la nouvelle version et vérifier qu’elle fonctionne pour vous. Faites-moi savoir si vous rencontrez d’autres problèmes.

[Namna]

*Le problème des pavés décalés par rapport à la grille est résolu. *
Il reste le problème de largeur et de hauteur.
Mon projet est bien réglé sur 1920 x 1080 et j’ai modifié le paramètre scale de votre fichier sur 1.0
Les bordures droite et bas sont hors écran.
Je suppose que 5 x largeur du pavé + 2 x bordure externe + 4 x bordure interne est supérieur à 1920

The problem of the offset pavers in relation to the grid is solved.
There is still the problem of width and height.
My project is set to 1920 x 1080 and I changed the scale parameter in your file to 1.0
The right and bottom borders are off screen.

I assume that 5 x pad width + 2 x outer border + 4 x inner border is greater than 1920

[Elusien]

That was partially the problem, the other mistake was that I had “box-sizing: content-box” for the grid container. I’ve tidied up the code to calculate the widths and heights and also corrected the box-sizing. I’ve then run it in full-screen mode at 1920x1080 and it works. So I have uploaded what i hope to be the final version onto the website for you to download.

C’était en partie le problème, l’autre erreur était que j’avais “box-sizing: content-box” pour le conteneur de grille. J’ai rangé le code pour calculer les largeurs et les hauteurs et j’ai également corrigé le dimensionnement des boîtes. Je l’ai ensuite exécuté en mode plein écran à 1920x1080 et cela fonctionne. J’ai donc téléchargé ce que j’espère être la version finale sur le site Web pour que vous puissiez la télécharger.

[Namna]

@Elusien

So I have uploaded what i hope to be the final version onto the website for you to download.

Oui, vous avez résolu le problème, l’exécution dans webvfx fonctionne bien désormais.
Voici un exemple réalisé avec.
Cependant j’espère que cela ne sera pas la dernière version, j’ai encore une dernière demande. Je pense que l’effacement de la grille à +/- 5s et son apparition à +/- 7 s est un peu trop brutale, vous devez bien avoir une solution pour lui appliquer un fondu ou une réduction/augmentation des traits sur quelques images.

Yes, you have solved the problem, the execution in webvfx works fine now.
Here is an example made with it.
However I hope this will not be the last version, I still have one last request. I think the grid out at +/- 5s and its in at +/- 7s is a bit too sharp, perhaps you must have a solution to apply a fade or a reduction/increase of the strokes on some images.

[Elusien]

@Namna

perhaps you must have a solution to apply a fade

As the magical genie would say: “Your wish is my command”. The grid now disappears at the end of an “open” then reappears at the beginning of a “shut” by keyframing the opacity, so it is no longer abrupt. the amount of time taken is the same as it takes a pane to open or shut. I have changed the default durations for open/shut from 5 secs to 8 (I think it is a bit easier on the eye) but of course you may choose your own values and in the Text:HTML filter the actual time is determined by the length of the clip to which the filter is applied.

The new version is now on the website.

Comme dirait le génie magique : “Votre souhait est ma commande”. La grille disparaît maintenant à la fin d’un “ouvert” puis réapparaît au début d’un “fermé” en encadrant l’opacité, elle n’est donc plus abrupte. le temps nécessaire est le même qu’il faut à une vitre pour s’ouvrir ou se fermer. J’ai changé les durées par défaut pour ouvrir/fermer de 5 secondes à 8 (je pense que c’est un peu plus facile à regarder) mais bien sûr vous pouvez choisir vos propres valeurs et dans le filtre Text:HTML le temps réel est déterminé par le longueur du clip auquel le filtre est appliqué.

La nouvelle version est maintenant sur le site Web.

[Namna]

C’est beaucoup mieux, merci mille fois.
Demain je ferai plus de tests.

That’s much better, thank you very much.
Tomorrow I will do more tests.

[Namna]

@Elusien

Voici une capture image par image de la fin de la phase “open”
On peut remarquer que le fondu de la bordure interne est en avance sur celui de la bordure externe.
Serait-il possible que les 2 soient synchronisés ?

Here is a frame by frame capture of the end of the “open” phase
You can see that the fade of the inner border is ahead of the fade of the outer border.
Is it possible that the 2 are synchronized?

[Elusien]

This is caused by the fact that the inside borders are contained within the element that has the outside border and both are decreasing their opacity at the same rate. So the inside borders are effectively decreasing twice as fast as the outside one. In your code, change the “switch” clause around line 255 to:

Cela est dû au fait que les bordures intérieures sont contenues dans l’élément qui a la bordure extérieure et que les deux diminuent leur opacité au même rythme. Ainsi, les bordures intérieures diminuent effectivement deux fois plus vite que la bordure extérieure. Dans votre code, remplacez la clause “switch” autour de la ligne 255 par:

	switch(ops[op_no].phase) {
		case 'open':
			tl.set(panes, {opacity: 1}, '>'+delay);
			tl.set('#grid, section', {borderColor: border_color}, '>');
			if (!parameters.fade) {
				tl.set(panes, {opacity: 0, stagger: {each: each_duration, from: "start"}}, '>');
			} else {
				tl.to (panes, {opacity: 0, stagger: {each: each_duration, from: "start"}}, '>');
			}
			if (remove_border) {
				tl.to('section', {opacity: 0, duration: each_duration * 5.0}, '>');
				tl.to('#grid'  , {opacity: 0, duration: each_duration * 2.5}, '<');					
			}
			delay = 0;
			break;
		case 'shut':
			tl.set(panes, {opacity: 0}, '>'+delay);
			tl.to ('section', {opacity: 1, duration: each_duration * 2.5}, '>');
			tl.to ('#grid'  , {opacity: 1, duration: each_duration * 5.0}, '<');
			if (!parameters.fade) {
				tl.set(panes, {opacity: 1, stagger: {each: each_duration, from: "end"  }}, '>');
			} else {
				tl.to (panes, {opacity: 1, stagger: {each: each_duration, from: "end"  }}, '>');
			}
			delay = 0;
			break;
		default:
			delay += ops[op_no].duration;
			break;
	}

I have modified the version on the website accordingly.

J’ai modifié la version sur le site en conséquence.