I decided to animate the letter “Y” because I have always found it very interesting. I find it interesting mostly because it looks like an arrow pointing at different directions. When looking at previous animation of this letter, I found some very cool ones, making me want to do one even more!

Given that I see this letter as an arrow, I decided to expand this idea by making an animation that would give the arrow a real direction.  During the development process, a friend saw my screen and thought the current state of my animation was cool. With this in mind, I saved the current state as a separate animation from my final one. This is why I am attaching two “Y” animations. The first one is just an initial state of the final one.

[iframe src=”http://www.anitype.com/entry/agtzfmFuaXR5cGVjb3IUCxIHbGV0dGVycxiAgIDA2ZafCgw/” width=”100%” height=”480″]

Final Animation:

[iframe src=”http://www.anitype.com/entry/agtzfmFuaXR5cGVjb3IUCxIHbGV0dGVycxiAgICAp9SSCgw/” width=”100%” height=”480″]

 

/**
 * Register your submission and choose a character
 * For more information check out the documentation
 * http://anitype.com/documentation
 */
Anitype.register('Y', {

  // Enter your name
  author: 'maria montenegro',

  // Enter a personal website, must have http
  website: 'http://www.Fusion-Sky.com/',

  // Make your animation here
  construct: function(two, points) {

    // Reference to instance
    var anitype = this;
    
    //Create my main lines
    var line_1 = two.makeLine(0,245,0,-50);
   
    //var line_2 = two.makeLine(0,115,0,-258);
    //var line_3 = two.makeLine(0,115,0,-258);
      
    //Create Vertices foreach line
    line_1.vertices[0].set(0,-445);     //245
    line_1.vertices[1].set(0,-650);    //-50
  
    //line_2.vertices[0].set(0,255);
    //line_2.vertices[1].set(0,-258);
    
    //line_3.vertices[0].set(0,255);
    //line_3.vertices[1].set(0,-258);
  
  // mini lines
   var line_2_1 = two.makeLine(0,115,0,-50);
   var line_2_2 = two.makeLine(0,115,0,-50);
   var line_2_3 = two.makeLine(0,115,0,-50);
    
    line_2_1.vertices[0].set(0,0);
    line_2_1.vertices[1].set(0,0);
    
    line_2_2.vertices[0].set(0,-250);
    line_2_2.vertices[1].set(0,-250);
    
    line_2_3.vertices[0].set(0,-250);
    line_2_3.vertices[1].set(0,-250);
    
   var line_3_1 = two.makeLine(0,115,0,-50);
   var line_3_2 = two.makeLine(0,115,0,-50);
   var line_3_3 = two.makeLine(0,115,0,-50);
    
    line_3_1.vertices[0].set(0,0);
    line_3_1.vertices[1].set(0,-150);
    
    line_3_2.vertices[0].set(0,-150);
    line_3_2.vertices[1].set(0,-250);
    
    line_3_3.vertices[0].set(0,-250);
    line_3_3.vertices[1].set(0,-250);
    
   //Create the animation via a tween
    function moveVert(vert, x1, x2, y1, y2,start,duration){
      anitype.addTween(vert, {
        to: { x: x1, y: y1 },
        easing: Anitype.Easing.Circular.Out,
        update: function() {
          anitype.addTween(vert, {
            to: {x: x2, y:y2},
            easing: Anitype.Easing.Elastic.Out,
            duration: duration,
            start: start
          });
        },
        duration: duration, // Value from 0 - 1
        start: start        // Value from 0 - 1
      });
    }
    
   moveVert(line_1.vertices[0],0,0,-45,245,0,1);
   moveVert(line_1.vertices[1],0,0,245,-50,0,1);
  
   //moveVert(line_2.vertices[0],0,0,255,115,.25,.5);
   //moveVert(line_2.vertices[1],0,-215,115,-258,.25,.5);
   //moveVert(line_3.vertices[0],0,0,255,115,.25,.5);
   //moveVert(line_3.vertices[1],0,215,115,-258,.25,.5);
    
    moveVert(line_2_1.vertices[1],0,-110,115,-187,.15,.3);
    moveVert(line_2_2.vertices[0],0,-110,0,-187,0,1);
    moveVert(line_2_2.vertices[1],-110,-154,-187,-264,.25,.5);
    moveVert(line_2_3.vertices[0],0,-154,0,-264,.5,1);
    moveVert(line_2_3.vertices[1],-154,-213,-264,-365,.7,1);
    
    moveVert(line_3_1.vertices[1],0,110,115,-187,.15,.3);
    moveVert(line_3_2.vertices[0],0,110,0,-187,0,1);
    moveVert(line_3_2.vertices[1],110,154,-187,-264,.25,.5);
    moveVert(line_3_3.vertices[0],0,154,0,-264,.5,1);
    moveVert(line_3_3.vertices[1],154,213,-264,-365,.7,1);
    
    
    return two.makeGroup(line_1,line_2_1,line_2_2,line_2_3, line_3_1,line_3_2,line_3_3);
  }

});