Animate the outline of a text

Layers (Claques) > New > Trim path

Je ne sais pas comment Trim Path est traduit en français. Si je tente de changer la langue dans Glaximate, il plante et Shotcut avec lui (parfois)

I don’t know how Trim Path is translated into French. If I try to change the language in Glaximate, it crashes and Shotcut with it (sometimes).

2 Likes

OK, merci, j’ai maintenant les chemins

Et pour l’animer ?

1 Like

2 Likes

Oh la ruse ! :star_struck:
Il faut faire des chemins de chemins !
J’aurais pu y passer quelques heures … :roll_eyes:
C’est quand même pas très convivial.
Merci, je vais pouvoir bien analyser votre démo.

Oh the trick! :star_struck:
We must make paths of paths!
I could have spent a few hours there… :roll_eyes:
It’s still not very user-friendly.
Thank you, I will be able to analyze your demo well.

2 Likes

Bon courage ! :slight_smile:
J’aurais volontiers passé plus de temps aujourd’hui sur ce projet, mais je dois quitter dans quelques minutes pour un rendez-vous chez le doc.
La dernière fois j’ai passé deux heures dans la salle d’attente :face_with_symbols_over_mouth:

Hi @namna,
@musicalbox’s Glaxinmate methods are awesome!!
But if you remember this thread from 2021, it can also be done with @elusien’s brilliant SVG animation method. To be truthful, I had forgotten how to do this myself, so I’m glad I posted step-by-step instructions!

Salut @namna,
Les méthodes Glaxinmate de @musicalbox sont géniales !!
Mais si vous vous souvenez de ce fil de discussion de 2021, cela peut aussi être fait avec la brillante méthode d’animation SVG de @elusien. Pour être honnête, j’avais oublié comment faire cela moi-même, donc je suis content d’avoir posté des instructions étape par étape !

2 Likes

*@MusicalBox *
J’ai un peu progressé grâce à vos explications et j’ai aussi regardé 3 tutos sur Glaxnimate de KamiGeek qui en plus sont en français :smiley:
J’arrive maintenant à isoler les chemins de chaque lettre d’un mot et de les animer séparément.
Il me reste encore à trouver la solution à ces 3 questions.
Comment diviser un chemin en plusieurs parties, exemple le contour extérieur du B
Comment définir le point de départ de chaque chemin ? (il semblerait que ce soit toujours en haut à gauche)
Comment inverser le sens de rotation d’un chemin ? (Sauf pour l’intérieur du O, cela tourne toujours dans le sens inverse des aiguilles d’une montre)

@MusicalBox
I made a little progress thanks to your explanations and I also watched 3 tutorials on Glaxnimate from KamiGeek which are also in French :smiley:
I can now isolate the paths of each letter of a word and animate them separately.

I still have to find the solution to these 3 questions.

  • How to divide a path into several parts, example the outer contour of B
  • How to define the starting point of each path? (it seems to always be at the top left)
  • How to reverse the direction of rotation of a path? (Except for the inside of the O, it always turns counterclockwise)

@jonray
Oui je me souviens, j’ai d’ailleurs toujours le site d’@Elusien dans mes favoris.

Yes I remember, I still have the @Elusien site in my favorites. :wink:

1 Like

J’ai trouvé pour le point 3
Régler End sur 100% et mettre les images clés sur Start de 100 à 0%

I found for point 3
Set End to 100% and set keyframes to Start from 100 to 0% :smiley:

S’assurer de sélectionner Groupe lors de la création du texte.
Be sure to select Group when creating text.

Sélectionner le texte dans le panneau Calques (Layers) et le convertir en Chemin (Path).
Select the text in the Layers panel and convert it to a Path.

Dans mon exemple ci-dessous, le texte est “BOX”. Si je déploie BOX01 dans le panneau des Calques, je vois 2 groupes et un chemin.
In my example below, the text is BOX. If I expand BOX01 in the Layers panel, I see 2 groups and one path.

Le premier groupe est pour la lettre B, qui contient 3 chemins.
Un pour l’extérieur et deux pour les deux formes intérieures de la lettre.
The first group is for the letter B, which contains 3 paths.
One for the outside and two for the two inside shapes of the letter.

Le deuxième groupe est pour la lettre, O qui contient 2 chemins.
Un pour l’extérieur et un pour l’intérieur (une seule forme à l’intérieur de la lettre O)
The second group is for the letter, O, which contains 2 paths.
One for the outside and one for the inside (only one single shape inside the letter O).

Le X ne contient qu’une ligne extérieure, donc il n’a pas besoin d’être dans un groupe.
The X contains only one outer line, so it doesn’t need to be in a group.

Donc, pour animer chaque parties d’une lettres il faut déployer son groupe et ajouter un Trim Path à chaque chemin dans le groupe.
So, to animate each part of a letter, you need to deploy its group and add a Trim Path to each path in the group.

Mon erreur d’hier était d’appliquer Trim Path directement aux groupes au lieu de les appliquer à chaque chemin à l’intérieur d’un groupe.
My mistake yesterday was to apply Trim Path directly to groups instead of to each path within a group.


Le point de départ de l’animation est déterminé par le paramètre offset du Trim Path. Tel que démontré dans la vidéo ci-dessous, lorsque Offset est à 0%, l’animation démarre dans le coin supérieur droit de mon carré. En changeant la valeur de offset, le point de départ change en conséquence.

The starting point of the animation is determined by the offset parameter of the Trim Path. As demonstrated in the video below, when Offset is set to 0%, the animation starts in the top right-hand corner of my square. By changing the offset value, the starting point changes accordingly.

J’ajoute que pour les formes simples (exemple: carrés, cercles) qui sont aussi larges que hautes, il est facile d’estimer l’endroit exact où on veut faire démarrer l’animation. Mais pour les formes plus complexes (comme une lettre), c’est moins évident. Il faut y aller un peu à tâtons.

I should add that for simple shapes (e.g. squares, circles) that are as wide as they are tall, it’s easy to estimate exactly where you want the animation to start. But for more complex shapes (like a letter), it’s less obvious. It’s a bit of a trial-and-error process.

2 Likes

Merci pour vos explications, cela me permet d’avancer.

Thank you for your explanations, this allows me to move forward.

OK, je vois bien maintenant à quoi sert ce paramètre.
Dans votre exemple, le point de départ c’est l’angle en haut à droite du carré alors que chez moi, pour les lettres c’est plutôt en haut à gauche.
J’ai longtemps cherché à coté car sur Mac j’ai trouvé une option qui semble définir le point de départ. Sur la lettre “O” de l’exemple ci-dessous, le point de départ est en haut au milieu. Un clic “DROIT” sur chacun des autres points permet de changer de point de départ en sélectionnant “Make first node”. Par contre, cela ne fonctionne que sur le “O”. Tous les points des autres lettres ne proposent pas cette option. Chez vous sous Windows c’est pareil ?

OK, now I see what this parameter is for.
In your example, the starting point is the top right corner of the square whereas for me, for the letters it is rather the top left.
I searched for a long time because on Mac I found an option which seems to define the starting point. On the letter “O” in the example below, the starting point is at the top middle. A “RIGHT” click on each of the other points allows you to change the starting point by selecting “Make first node”. On the other hand, it only works on the “O”. Not all points in other letters offer this option. Is it the same for you on Windows?

Second point restant à régler, si je souhaite animer votre carré en 2 demi-moitiés comme ci dessous.
Y a t’il une possibilité de diviser le chemin du carré en 2, (puis appliquer un “trim path” sur chaque moitié), ou faut-il dessiner les 2 moitiés séparément ? (c’est facile pour un carré, un peu moins pour une lettre)

Second point remaining to be resolved, if I wish to animate your square in 2 half-halves as below.
Is there a possibility of dividing the path of the square in 2, (then apply a “trim path” on each half), or do we have to draw the 2 halves separately? (it’s easy for a square, a little less for a letter)

J’espère que je ne vous embête pas trop avec toutes mes questions. :wink:

I hope I don’t bother you too much with all my questions. :wink:

Vous ne m’embêtez pas car j’apprend de nouveaux trucs en même temps que vous.
You’re not bothering me because I’m learning new tricks at the same time as you.

Oui, C’est pareil. J’ignore pourquoi.
Yes, it’s the same. I don’t know why.

Bonne question. Je n’ai rien vu jusqu’à maintenant qui ressemble à un outil ou un paramètre pour faire ça sans couper la forme en deux. Va falloir creuser un peu pour trouver une réponse :slight_smile:

Good question. I haven’t seen anything so far that looks like a tool or parameter to do this without cutting the shape in half. We’ll have to do some digging to find an answer.

1 Like

J’ai trouvé comment faire. Pour un carré en tout cas.
Il faut utiliser les paramètres start ET end du Trim Path.

I figured out how to do it. For a square anyway.
You have to use the start AND end parameters of the Trim Path.

Premier keyframe /First keyframe
start: 50%
end: 50%

Deuxième keyframe / Second keyframe
start: 100%
end: 0%

Voici un exemple avec une carré. Notez que pour pouvoir ajouter un nouveau node (comme point de départ) au carré, il faut d’abord le convertir en chemin.

Here’s an example using a square. Note that in order to add a new node (as a starting point) to the square, it must first be converted to a path.

3 Likes

En fait sur le “O” ca fonctionne seulement sur le cercle extérieur du “O”.
Il est impossible de changer le point de départ sur le cercle intérieur.
In fact, on the "O " it only works on the outer circle of the “O”.
It is impossible to change the starting point on the inner circle.

Et je pense avoir trouvé pourquoi.
Le cercle extérieur du “O” est un chemin fermé. Tous les points (nodes) sont reliés.
Alors que sur le cercle intérieur le point du bas est en fait deux points qui ne sont pas reliés. Ils sont juste superposés.
And I think I’ve found out why.
The outer circle of the “O” is a closed path. All the points (nodes) are connected.
Whereas on the inner circle the bottom point is actually two points that aren’t connected. They’re just superimposed.

J’ai testé en dessinant un forme ouverte et une forme fermée. Et je ne peux pas changer le point de départ de la forme ouverte.
I tested this by drawing an open shape and a closed shape. And I can’t change the starting point of the open shape.

Donc si on trouvais le moyen de fermer les formes ouvertes des lettres, ce problème serait aussi réglé.
So if we could find a way to close open shapes on letters, this problem would be solved too.

Il faut encore creuser :slight_smile:
Still some digging to do.

2 Likes

Hi @musicalbox and @namna - just to say I’m following this with great interest. When I get some time I’ll be trying this out myself in Glaxnimate, and also getting to use Glaxnimate more. Great work - keep it coming! :+1:

Salut @musicalbox et @namna - juste pour dire que je suis cela avec beaucoup d’intérêt. Quand j’aurai un peu de temps, j’essaierai cela moi-même dans Glaxnimate et je pourrai également utiliser davantage Glaxnimate. Excellent travail - continuez comme ça ! :+1:

2 Likes

I’ve only one word for it… Impressive! I’d already tried to create this animation with a rectangle but never succeeded. You’re too talented! :man_mage: :clap: :clap:
Je n’ai qu’un seul mot… Impressionnant ! J’avais déjà tenté de créer cette animation avec un rectangle sans jamais réussir. Vous êtes trop fort ! :man_mage: :clap: :clap:

1 Like

@SergeC Oui, il est très fort. J’ai passé encore quelques heures aujourd’hui sans progresser :face_with_symbols_over_mouth:

@MusicalBox Bravo, je confirme que lorsqu’on ne voit pas le “Make first node” c’est que le contour est ouvert.
Bravo aussi pour la ruse des Keyframes, cela fonctionne bien sur les lettres dont le contour est fermé.
Je suis persuadé qu’il doit être possible d’ouvrir un tracé fermé ou de fermer un tracé ouvert.
J’ai remarqué aussi ces 2 commandes dans le menu “Chemin” mais pour l’instant je n’arrive pas à les dégriser.

@SergeC Yes, he is very strong. I spent another few hours today without making any progress :face_with_symbols_over_mouth:

@MusicalBox Well done, I confirm that when you don’t see the “Make first node” it’s because the outline is open.
Bravo also for the trick of the Keyframes, it works well on letters with a closed outline.
I am convinced that it should be possible to open a closed route or close an open route.
I also noticed these 2 commands in the “Path” menu but for the moment I cannot resolve them.

1 Like

Sur un coup de chance, je viens de découvrir que l’on peut fermer un contour ouvert.
Cocher la case “Closed” dans la fenêtre “Propriété” du chemin.

By a stroke of luck, I just discovered that you can close an open contour.
Check the “Closed” box in the “Property” window of the path.

2 Likes

Merci @SergeC :slight_smile:

Belle trouvaille @Namna !! J’aurais cherché longtemps. Je vais retenir la leçon et penser à jeter un coup d’œil dans les propriétés à l’avenir quand je serai bloqué sur un problème :slight_smile:
Great find @Namna!!! I would have searched for a long time before finding this. I’ve learned the lesson and will remember to take a look in the properties in the future when I’m stuck on a problem.

Je suppose que maintenant vous avez tous les outils dont vous avez besoin pour créer vos textes avec bordures animées?
I guess now you have all the tools you need to create your text with animated outlines?

1 Like

Je n’ai toujours pas trouvé comment accéder aux commandes grisées du menu “Chemin”, mais au moins on sait ouvrir et fermer un chemin.

Oui, je vais essayer de faire un titre pour ma prochaine vidéo.
Merci encore pour votre aide :wink:

I still haven’t figured out how to access the grayed out commands in the “Path” menu, but at least we know how to open and close a path.

Yes, I will try to make a title for my next video.
Thanks again for your help :wink:

1 Like

Voici mon titre.
La qualité est meilleure sur l’original bien-sûr, j’ai réduit la taille et la fréquence pour que le fichier ne dépasse pas les limites du forum.
Artistiquement, le résultat n’est pas forcément à la hauteur du temps consacré à cette réalisation, mais je suis content, je sais maintenant comment transformer des lettres en plusieurs chemins et les animer.
Le plus simple évidemment c’est de laisser Glaxnimate tout faire, mais c’est lui qui choisit le point de départ du tracé, et il n’en fait qu’un par lettre. Cela plait ou pas, mais on gagne du temps.

Here is my title.
The quality is better on the original of course, I reduced the size and frequency so that the file does not exceed the limits of the forum.
Artistically, the result is not necessarily up to the time devoted to this achievement, but I am happy, I now know how to transform letters into several paths and animate them.
The simplest thing is obviously to let Glaxnimate do everything, but it is he who chooses the starting point of the trace, and he only makes one per letter. You like it or not, but you save time.

2 Likes