Bringing Letters to Life: Coding a Kinetic SVG Typography Animation

From our sponsor: Attain inboxes when it issues most with Mailchimp’s data-backed e-mail automations. Join Mailchimp now.

I lately found the web site of Orion Icon library and I immediately fell in love with their movement opening video.

This video felt to me like an ideal problem to recreate it utilizing solely SVG and GreenSock.
I did adapt a bit the movement and used my very own title as an alternative of Orion, however right here is my fairly first rate end result ✨

See the Pen
Orion Icon Library intro animation by Louis Hoebregts (@Mamboleoo)
on CodePen.

On this article we’ll solely deal with the typography animation of the brand. Right here is the a part of the movement with the brand that I slowed down 3 occasions to obviously present what is occurring.

From what we are able to see, every path is being drawn 3 times, every with a unique color and somewhat delay between every.

Listed below are the three steps we’ll observe on this tutorial:

1. Create the SVG file utilizing an hairline font
2. Load your SVG and dynamically generate the markup
3. Setup a GreenSock animation for every letter
4. Management paths route

1. Create the SVG file utilizing an hairline font

Sadly this animation can’t be made simply with any typeface you need. It’s because we’d like every letter to be drawn from a single path utilizing a thick stroke. We name that form of typeface a monoline, hairline and even stroke font.

There are alternative ways of drawing your individual textual content with single strokes.

After getting chosen your methodology, edit the paths the way in which you need your animation to behave.
Let’s say for instance that we would like the letter O to be drawn from two paths going left and proper as an alternative of a single path doing a full circle. Choose your letter and minimize it in half in any your vector software program.

Export your file in your laptop and import it to SVGOMG to optimize and take away any undesirable code. Ensure the choice Merge paths is disable, in any other case you might need some letters mixed right into a single path.

2. Load your SVG and dynamically generate the markup

For this animation, we’d like every path to be drawn 3 times, each time with a unique color. We might have already got all of the paths prepared in our markup, however I discover it simpler to make it immediately in our JavaScript.
So every path must be duplicated twice, with a unique color every time.

Let’s create a operate we are able to name for every path tag in our SVG and generate the clones.

// Retailer an array with the colors we would like for this animation
// The final color being the ultimate state of the textual content
const colours = ['#e97777', '#ffc777', '#fffad7'];

// This operate receives 2 parameters
// The SVG node (a path, line,...)
operate tween (node, index) {
  // Retailer the node in one other variable
  let path = node;
 // Loop by way of the colours
  colours.forEach((coloration, index) => {
    // If this isn't the primary iteration, clone the trail
    if (index !== 0) {
      path = path.cloneNode();
      // Append the clone to the supply path's mother or father
      node.parentNode.appendChild(path);
    }
    // Assign the color stroke on the trail
    path.setAttribute('stroke', coloration);
  });
}

// Name the operate for every aspect we need to animate
// Since I even have line tags in my SVG, I want to pick out each path and line parts
doc.querySelectorAll('.mySvg path, .mySvg line').forEach(p => tween(p));

For those who load the web page now, there shouldn’t be any distinction aside from the strokes to be the colors of your final merchandise within the array.
However for those who examine the web page, you need to see every path being duplicated twice within the DOM.

3. Setup a GreenSock animation for every letter

Lastly, we’ll animate every path utilizing the stroke-dashoffset approach. If you’re not acquainted with it, you possibly can examine this brief submit by Chris Coyier that explains it very nicely.

We first create a worldwide TimeLine in order that we are able to repeat the animation simply. For the sake of the demo, I’m additionally utilizing the GreenSock DevTools and I provoke the devtools with the timeline (⚠️ These devtools solely work totally free on CodePen).

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

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

operate tween (node) {
  // [...]
  // Outline a random delay when the tween will begin
  const delay = Math.random();
  // Calculate the size of the trail
  const size = path.getTotalLength();
  colours.forEach((coloration, index) => {
    // [...]
    // Assign the stroke-dasharray and stroke-dashoffset properties to the trail's size
    // Due to rounded linecap, we generally see somewhat dot originally of the trail
    // To keep away from that, I am growing the values somewhat bit till I do not see any dot
    tl.set(path, {
      strokeDasharray: size + 0.5,
      strokeDashoffset: size + 0.6,
      autoRound: false // Keep away from situation with GreenSock rounding our values to integers
    }, 0); // We wish this to occur on the very starting of our TimeLine

    // Animate every path to an offset of 0 in order that it makes it seen once more
    // Attempt enjoying with all of the values right here!
    tl.to(path, {
      strokeDashoffset: 0,
      autoRound: false,
      length: 1.2,
      ease: `power3.out`
      // Offset every tween with 250ms in order that they do not animate all of sudden
    }, index * 0.25 + delay);
  });
}

See the Pen Typography animation by Louis Hoebregts (@Mamboleoo) on CodePen.

4. Management paths route

On this animation, the letter i is being animated from the underside to the highest. Let’s say that we need to be the alternative!
You might have two methods of doing that.

The primary one could be to reverse the animation and animate the stroke-dashoffset from the size worth, to 2 occasions the size (size * 2).
But when we try this immediately, it could influence all of the paths. So we would wish a solution to set off this solely on particular nodes for instance with including a data-reverse="true" attribute on the paths we need to reverse and reverse the animation for them.

The second resolution is to return in your vector software program and reverse the trail route.

• For Adobe Illustrator, choose your path and go to Object→Path→Reverse Path Route
• For Inkscape, choose your path and go to Path→Reverse

Export your file once more, optimize it and re-import it in your web page.

Bonus: Extra examples

Listed below are extra demos utilizing the identical approach.
Be happy to examine the feedback within the code to know how they works!

See the Pen Typography animation 2 by Louis Hoebregts (@Mamboleoo) on CodePen.

See the Pen Typography animation 3 by Louis Hoebregts (@Mamboleoo) on CodePen.

That’s all ✨
I hope one can find this tutorial helpful for perhaps considered one of your mission. In that case, please share with me what you got here up with!

Attempt utilizing completely different and extra colors, tweaking the values of for the length or delays, perhaps even the easing. Now it’s as much as you to make your individual typography animation 🌈