Creative SVG Letter Animations

Maybe you’ve seen some of those interesting text animations recently, like the one shown on the website of Control Films or in hover effects for image captions: letters disappear and appear in an artistic way, getting drawn along their lines. While we’ve had a great share of stoke animation effects for images, shapes and borders, letters are something really special. Today we’d like to share an experimental plugin with you that allows to animate a font letter-by-letter in a creative way.

The first demo shows various use cases for different setting of the plugin and for the last couple of examples we’ve also used mo.js, a great motion graphics library for the web made by Oleg Solomka.

We have used a very exquisite lowercase font designed by Frank van der Hak for the design of our letters. We haven’t used the original paths created by the author, but instead, we have redrawn each letter to get more optimized letter animations.

This font is great because it’s really creative and also because it is made from basic shapes. If you look closely you will see that all letters are made of circle segments and straight lines, which greatly facilitates mathematical work associated with drawing letters with SVG paths in our case.

Usage

Without further ado, let’s see how we can use this plugin. The first step is to add the necessary libraries. Our script depends on segment (to animate SVG paths) and d3-ease (for easing functions) to work properly. Also, we’ll need to add our letters.js script:

<script src="js/segment.js"></script>
<script src="js/d3-ease.v0.6.js"></script>
<script src="js/letters.js"></script>

Then we need to create a container element in the HTML with the text we want. This text will then be replaced with the artistic letters.

<div class="my-text">my text</div>

Now we can get this element in our JavaScript, define the options for the letters we’ll draw, and initialize our plugin. Every option (except individualDelays) can be defined as:

• Single value: It will be applied to all letters.
• Array: The first element in the array will be applied to the first letter, the second to the second letter, etc. In case of more letters than array elements, the last letters will take the value of the last element in the array.

Let’s see an example with all the possible options we can define, with a brief description of each one.

// Selecting the container element
var el = document.querySelector('.my-text');

// All the possible options (these are the default values)
// Remember that every option (except individualDelays) can be defined as single value or array
var options = {
    size: 100,         // Font size, defined by the height of the letters (pixels)
    weight: 1,         // Font weight (pixels)
    rounded: false,    // Rounded letter endings
    color: '#5F6062',  // Font color
    duration: 1,       // Duration of the animation of each letter (seconds)
    delay: [0, 0.05],  // Delay animation among letters (seconds)
    fade: 0.5,         // Fade effect duration (seconds)
    easing: d3_ease.easeCubicInOut.ease,   // Easing function
    individualDelays: false,               // If false (default), every letter delay increase gradually, showing letters from left to right always. If you want to show letters in a disorderly way, set it to true, and define different delays for the desired letters.
};

// Initializing the text (Letters parameters: container-element, options)
var myText = new Letters(el, options);

So far, we have defined the display and animation options for our text, and our plugin has generated the SVGs inside the container. By default, our text remains hidden, waiting for an animation trigger. Let’s see how to do that, and the possible options we have:

// Show letters with the default options defined
myText.show();

// Hide letters with the default options defined
myText.hide();

// Toggle letters with the default options defined
myText.toggle();

// An example with all the possible options for triggers
// Parameters (JSON): duration, delay, fade, easing, individualDelays, callback
var newOptions = {
    duration: 2,
    delay: 0.2,
    fade: 1,
    easing: d3_ease.easeCircleInOut.ease,
    individualDelays: false,
    callback: function(){
        myText.hide();
    }
};
// These new options will override the options defined in the initialization
myText.show(newOptions);

// Show letters instantly, without any animation at all
// There is a hideInstantly and toggleInstantly function, too
myText.showInstantly();  // Shortcut for myText.show(0, 0, 0);

These are just some examples. As you can see, there are many options to adjust the animations according to your needs and your creativity 🙂

Final touches

Each letter SVG gets a letter class, the letter-(a, b, c, etc.) class, and the letter-(1, 2, 3, etc.) class. This allows us to customize properties such as the margin for all letters, for a particular letter, or for a letter that is in a specific position. Let’s see some examples:

/* Setting margin among all letters */
.letter {
  margin: 0 10px;
}

/* Setting background to letter m */
.letter-m {
  background-color: lightsalmon;
}

Adding letters and customizing the typeface

If you’d like to extend the alphabet or change the typeface itself, you can do so. Note that the main purpose of the initAlphabet function is to define the alphabet. Here is an example:

// Example initializing an alphabet with letter 'o' (inside letters.js)
initAlphabet: function(weight, rounded){
    // Calculating paths and dimensions
    // Note that we need to take the weight of letters and rounded endings (parameters) into account
    var width = 44 + weight;
    var height = 94 + (2 * weight);
    var radius = 20;
    var circle = 'm 0 -'+ radius +' a '+ radius +' '+ radius +' 0 1 1 0 '+ (2 * radius) +' a '+ radius +' '+ radius +' 0 1 1 0 -'+ (2 * radius);
    var circleCenter = 'm '+ (width / 2) +' '+ (height / 2) +' ' + circle;

    // Defining the alphabet (character set)
    this.alphabet = {
        // Every character needs to be defined as JSON following this notation
        'o': {                                           // Letter/Character
            svg: {width: width, height: height},         // Dimensions of SVG element
            paths: [circleCenter],                       // d attribute of the paths
            initial: [{begin: '-150%', end: '-150%'}],   // Initial values to hide the paths
            final: [{begin: '2%', end: '98%'}]           // Final values to show the paths
        }
    };
}

If you’d like to understand better how Segment works, check out the tutorial on how to create an animated menu icon and the documentation.

If you’d like to contribute to the letters.js project and develop new characters (special characters, numbers, etc.) check out the letters.js GitHub repo. Any other kind of pull requests for improving the code are welcome, too 🙂 Below you will find the GitHub repo for the demo project.

And that’s all! We really hope you like it and find it useful.