Bonjour,
Je ne dispose pas de AE, et je me demande si on pourrait faire ce genre d’animation avec SC.
Ma première idée c’est d’utiliser Glaxnimate, mais je ne suis pas assez familiarisé avec pour voir si cela est possible.
Quelqu’un a t’il essayé ?
Hi,
I don’t have AE, and I wonder if we could do this kind of animation with SC.
My first idea is to use Glaxnimate, but I’m not familiar enough with it to see if that’s possible.
Has anyone tried?
Dans After Effect, il utilise l’outil Réduire les tracés, qui est pratiquement la même chose que Trim Paths dans Glaxnimate.
In After Effect, he uses the Réduire les tracés tool, which is practically the same as Trim Paths in Glaxnimate.
En 5 minutes je suis arrivé à ce résultat… mais avec une seule lettre. Pour arriver à son résultat, il faudra quelques minutes, ou heures de tests et maux de tête (peut-être 
)
In 5 minutes I got this result… with only one letter though. To arrive at his result, it will take a few minutes, or hours of tests and headaches.
Dans Glaxnimate on peut aussi convertir en le texte en forme (ou path dans Glaxnimate)
J’y suis arrivé avec une lettre, mais avec un texte de plusieurs lettres, c’est plus compliqué. Causes des potentiels maux de tête 
In Glaxnimate, you can also convert text into form (or path in Glaxnimate). I was able to do this with a single letter, but with multi-letter text, it’s more complicated.
Pas encore ça, mais j’ai un peu progressé:
Not there yet, but I’ve made some progress:
C’est exactement cela.
De mon coté après beaucoup trop de temps, j’ai réussi à transformer le contour d’une lettre en chemin, mais je ne me souviens déjà plus de comment j’ai fait.
Mais ensuite animer le chemin, je n’ai toujours pas trouvé.
C’est un peu comme dans mon tuto sur le tracé d’un trajet sur une carte, ou celui de KamiGeek (dont je me suis inspiré).
Je suis parvenu a animer les lettres séparément.
Chaque lettre est un tracé (path) et doit avoir son propre calque Trim Path
J’ai crée un trim path pour le G (avec les keyframes), je l’ai dupliqué pour chacune des autres lettres
It’s a bit like my tutorial on how to draw a route on a map, or the one by KamiGeek (which I used as inspiration).
I managed to animate the letters separately.
Each letter is a path and must have its own Trim Path layer.
I created a trim path for the G (with keyframes), and duplicated it for each of the other letters.
Et pour l’instant, ça donne ceci:
And so far, it looks like this:
Il y aura moyen de faire des animations plus compliqué en jouant avec les deux paramètre Start et End et possiblement aussi Offset.
Pour l’animation ci-dessus, je n’ai utilisé que End
There will be ways of making more complicated animations by playing with the two parameters Start and End and possibly also Offset.
For the animation above, I only used End.
En donnant une valeur différente à chaque paramètre Offset on obtient en effectivement un résultat plus intéressant.
Giving a different value to each Offset parameter actually produces a more interesting result.
Super, vous allez bien plus vite que moi.
Pour l’instant, j’ai il me semble réussi à décomposer mon B en 3 chemins si j’en crois les losanges.
Par contre, je n’ai pas de trim path dans la liste ???
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).
Oh la ruse ! 
Il faut faire des chemins de chemins !
J’aurais pu y passer quelques heures … 
C’est quand même pas très convivial.
Merci, je vais pouvoir bien analyser votre démo.
Oh the trick!
We must make paths of paths!
I could have spent a few hours there…
It’s still not very user-friendly.
Thank you, I will be able to analyze your demo well.
Bon courage !
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 
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 !
*@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 
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
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.
@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.
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%
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.
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.
I hope I don’t bother you too much with all my questions.
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
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.
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.
