Creative SVG Letter Animations

An experimental plugin for animating SVG letters using Segment. The idea is to animate the path strokes of an interesting display font in a creative way.

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.

animatedLetters5_25

Attention: This plugin is in development and highly experimental. It’s still a proof of concept and there still seem to be some issues in IE with rendering the SVGs properly.

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.

knarf_art_vector_font_by_knarfart

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.

Tagged with:

Luis Goncalves

Front-end developer

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 36

Comments are closed.
  1. Dam, these effects are so crazy man! Great work.. Nicely done..! I am going to try to use this on my project, please pardon for intrusion 🙂

  2. Wow! Its Crazy… Was not knowing that this can be done using scripts.. Awesome!

  3. This are all new letter design. I heard it first time on this blog. Now i am able to make some SVG letters in my Website design. Thanks for sharing some innovative web design.

  4. It’s really cool effect !
    Is it possible to make a loop, when user download the page, animated effect appears without the “play” button, and the animation repeat and repeat.

    ThankS!

  5. Hi, very nice effects 🙂

    Do I see your process correctly, and is it something like this:

    – the libs replaces all text with svg (generate that on the fly)
    – use d3 easing for nice animation
    – we use css to style each letter, or separate letters with it’s props..

    Did you do tests with some large paragraphs of text, would that be heavy for cpu and UX?

    cheers

    • Exactly, that’s the process 🙂
      I really have not tried with great texts, but the library is not intended to animate paragraphs. I think that only would make sense and would be useful for small text, headers, etc.
      Thanks for comment!

  6. Great plugin for web design. It will definitely make my website awesome.

    • It was great if you give option to change font family option if there is already please let us known
      Thanks

  7. I tried to make Animated text logo using the above code. But How to make it responsive according to browser size.