InMy.Live

De notre parrain :

Accédez aux boîtes de réception quand cela compte le plus avec les automatisations de messagerie basées sur les données de Mailchimp. Inscrivez-vous à Mailchimp maintenant.

J’ai récemment découvert le site Web de la bibliothèque Orion Icon et je suis immédiatement tombé amoureux de leur vidéo d’ouverture de mouvement.

Cette vidéo m’a semblé être un défi parfait pour la recréer en utilisant uniquement SVG et GreenSock.
J’ai adapté un peu le mouvement et utilisé mon propre nom au lieu d’Orion, mais voici mon résultat assez décent ✨

Voir le stylo
Animation d’introduction de la bibliothèque d’icônes Orion par Louis Hoebregts (@Mamboleoo)
sur CodePen.

Dans cet article nous nous intéresserons uniquement à l’animation typographique du logo. Voici la partie du mouvement avec le logo que j’ai ralenti 3 fois pour bien montrer ce qui se passe.

D’après ce que nous pouvons voir, chaque chemin est dessiné trois fois, chacun avec une couleur différente et un peu de retard entre chacun.

Voici les 3 étapes que nous allons suivre dans ce tutoriel :

1. Créez le fichier SVG à l’aide d’une police capillaire
2. Chargez votre SVG et générez dynamiquement le balisage
3. Configurez une animation GreenSock pour chaque lettre
4. Contrôler la direction des chemins

1. Créez le fichier SVG à l’aide d’une police capillaire

Malheureusement, cette animation ne peut pas être réalisée facilement avec la police de votre choix. En effet, nous avons besoin que chaque lettre soit dessinée à partir d’un seul chemin en utilisant un trait épais. Nous appelons ce type de police une police monoline, hairline ou même trait.

Il existe différentes façons de dessiner votre propre texte avec des traits simples.

Une fois que vous avez choisi votre méthode, éditez les chemins comme vous voulez que votre animation se comporte.
Disons par exemple que nous voulons la lettre O être tiré de deux chemins allant à gauche et à droite au lieu d’un seul chemin faisant un cercle complet. Sélectionnez votre lettre et coupez-la en deux dans n’importe quel logiciel vectoriel.

Exportez votre fichier sur votre ordinateur et importez-le dans SVGOMG pour optimiser et supprimer tout code indésirable. Assurez-vous que l’option Merge paths est désactivé, sinon vous pourriez avoir des lettres combinées en un seul chemin.

2. Chargez votre SVG et générez dynamiquement le balisage

Pour cette animation, nous avons besoin que chaque chemin soit dessiné trois fois, chaque fois avec une couleur différente. Nous pourrions déjà avoir tous les chemins prêts dans notre balisage, mais je trouve plus facile de le faire directement dans notre JavaScript.
Ainsi, chaque chemin doit être dupliqué deux fois, avec une couleur différente à chaque fois.

Créons une fonction que nous pouvons appeler pour chaque balise de chemin dans notre SVG et générons les clones.

// Store an array with the colours we want for this animation
// The last colour being the final state of the text
const colors = ['#e97777', '#ffc777', '#fffad7'];

// This function receives 2 parameters
// The SVG node (a path, line,...)
function tween (node, index) {
  // Store the node in another variable
  let path = node;
 // Loop through the colors
  colors.forEach((color, index) => {
    // If this is not the first iteration, clone the path
    if (index !== 0) {
      path = path.cloneNode();
      // Append the clone to the source path's parent
      node.parentNode.appendChild(path);
    }
    // Assign the colour stroke on the path
    path.setAttribute('stroke', color);
  });
}

// Call the function for each element we want to animate
// Since I also have line tags in my SVG, I need to select every path and line elements
document.querySelectorAll('.mySvg path, .mySvg line').forEach(p => tween(p));

Si vous chargez la page maintenant, il ne devrait pas y avoir de différence, sauf que les traits correspondent aux couleurs de votre dernier élément du tableau.
Mais si vous inspectez la page, vous devriez voir chaque chemin être dupliqué deux fois dans le DOM.

3. Configurez une animation GreenSock pour chaque lettre

Enfin, nous animerons chaque chemin en utilisant le stroke-dashoffset technique. Si vous ne le connaissez pas, vous pouvez consulter ce court article de Chris Coyier qui l’explique très bien.

Nous créons d’abord une TimeLine globale afin de pouvoir répéter l’animation facilement. Pour les besoins de la démo, j’utilise également les GreenSock DevTools et j’initie les devtools avec la chronologie (⚠️ Ces devtools ne fonctionnent que gratuitement sur CodePen).

// Create a GreenSock timeline that will repeat infinitely
const tl = gsap.timeline({
  id: 'Timeline',
  repeat: -1,
  repeatDelay: 1.5
});

// Setup the devtools for the demo
GSDevTools.create({
  animation: tl
});

function tween (node) {
  // [...]
  // Define a random delay when the tween will start
  const delay = Math.random();
  // Calculate the length of the path
  const length = path.getTotalLength();
  colors.forEach((color, index) => {
    // [...]
    // Assign the stroke-dasharray and stroke-dashoffset properties to the path's length
    // Because of rounded linecap, we sometimes see a little dot at the beginning of the path
    // To avoid that, I'm increasing the values a little bit until I don't see any dot
    tl.set(path, {
      strokeDasharray: length + 0.5,
      strokeDashoffset: length + 0.6,
      autoRound: false // Avoid issue with GreenSock rounding our values to integers
    }, 0); // We want this to happen at the very beginning of our TimeLine

    // Animate each path to an offset of 0 so that it makes it visible again
    // Try playing with all the values here!
    tl.to(path, {
      strokeDashoffset: 0,
      autoRound: false,
      duration: 1.2,
      ease: `power3.out`
      // Offset each tween with 250ms so that they don't animate all at once
    }, index * 0.25 + delay);
  });
}

Voir l’animation Pen Typography de Louis Hoebregts (@Mamboleoo) sur CodePen.

4. Contrôler la direction des chemins

Dans cette animation, la lettre i est animé de bas en haut. Disons que nous voulons être le contraire !
Vous avez deux façons de le faire.

La première serait d’inverser l’animation et d’animer le stroke-dashoffset de la valeur de longueur, à deux fois la longueur (length * 2).
Mais si nous le faisions directement, cela aurait un impact sur tous les chemins. Nous aurions donc besoin d’un moyen de déclencher cela uniquement sur des nœuds spécifiques, par exemple en ajoutant un data-reverse="true" attribut sur les chemins que nous voulons inverser et inverser l’animation pour eux.

La deuxième solution est de revenir dans votre logiciel vectoriel et d’inverser le sens du tracé.

• Pour Adobe Illustrator, sélectionnez votre chemin et accédez à Objet → Chemin → Inverser la direction du chemin
• Pour Inkscape, sélectionnez votre chemin et allez dans Chemin → Inverser

Exportez à nouveau votre fichier, optimisez-le et réimportez-le dans votre page.

Bonus : Plus d’exemples

Voici d’autres démos utilisant la même technique.
N’hésitez pas à consulter les commentaires dans le code pour comprendre leur fonctionnement !

Voir l’animation Pen Typography 2 par Louis Hoebregts (@Mamboleoo) sur CodePen.

Voir l’animation Pen Typography 3 par Louis Hoebregts (@Mamboleoo) sur CodePen.

C’est tout ✨
J’espère que vous trouverez ce tutoriel utile pour peut-être l’un de vos projets. Si oui, partagez avec moi ce que vous avez trouvé !

Essayez d’utiliser des couleurs différentes et plus, en ajustant les valeurs de pour la durée ou les retards, peut-être même l’assouplissement. Maintenant c’est à vous de faire votre propre animation typographique 🌈