SVG line fill animation

line fill animation

'use strict';

angular.module('HireStack').directive('chartLines', ['$location', function($location){
  // Runs dursuing compile
  return {
    // name: '',
    // priority: 1,
    // terminal: true,
    // scope: {}, // {} = isolate, true = child, false/undefined = no change
    // controller: function($scope, $element, $attrs, $transclude) {},
    // require: 'ngModel', // Array = multiple requires, ? = optional, ^ = check parent elements
    restrict: 'A', // E = Element, A = Attribute, C = Class, M = Comment
    // template: '',
    // templateUrl: '',
    // replace: true,
    // transclude: true,
    // compile: function(tElement, tAttrs, function transclude(function(scope, cloneLinkingFn){ return function linking(scope, elm, attrs){}})),
    link: function($scope, iElm, iAttrs, controller) {

      // Vertical top line

      var vertTop =  Snap("#vertTop").attr({width:"12",height:"126"});
      vertTop.attr({preserveAspectRatio:"none"});
      vertTop.attr({viewbox:"0 0 12 126"});

      // Vertical line

      var vertTopline2a = vertTop.line(12,100,12,0).attr({strokeWidth: 3,strokeLinecap:"round"});
      var vertTopline2b = vertTop.line(12,0,12,0).attr({strokeWidth: 3,strokeLinecap:"round"});

      var vertTopcircle1 = vertTop.circle(12,100,5);
      vertTopcircle1.attr({ id: 'vertTopcircle_2' });

      // Elements group
      var vertToplineg1 = vertTop.g(vertTopcircle1, vertTopline2a, vertTopline2b);

      vertToplineg1.attr({fill:"#d7d7d7", stroke: '#4daf7c'});

      vertTopline2b.attr({stroke: '#d7d7d7'});
      vertTopline2a.attr({stroke: '#d7d7d7'});
      vertTopcircle1.attr({stroke: '#d7d7d7'});

      function startAnimation(){

            // Reset all
            clearAll();

            vertTopline2b.attr({stroke: '#4daf7c'});
            vertTopline2b.stop().animate({'y1': '100'}, 400, mina.linear,
             function() {
              vertTopcircle1.stop().animate({'fill': '#4daf7c'}, 200, mina.linear,
              function() {
                // startAnimation(); // Repeat this animation so it appears infinite.
                lineg1Animation();
              });

             });
      }

      // Bottom vertical line

      var vertBottom =  Snap("#vertBottom").attr({width:"12",height:"126"});
      vertBottom.attr({preserveAspectRatio:"none"});
      vertBottom.attr({viewbox:"0 0 12 126"});

      // Vertical line

      var vertBottomline2a = vertBottom.line(12,100,12,0).attr({strokeWidth: 3,strokeLinecap:"round"});
      var vertBottomline2b = vertBottom.line(12,0,12,0).attr({strokeWidth: 3,strokeLinecap:"round"});

      var vertBottomcircle1 = vertBottom.circle(12,100,5);
      vertBottomcircle1.attr({ id: 'vertBottomcircle_2' });

      // Elements group
      var vertBottomlineg1 = vertBottom.g(vertBottomcircle1, vertBottomline2a, vertBottomline2b);

      vertBottomlineg1.attr({fill:"#d7d7d7", stroke: '#4daf7c'});

      vertBottomline2b.attr({stroke: '#d7d7d7'});
      vertBottomline2a.attr({stroke: '#d7d7d7'});
      vertBottomcircle1.attr({stroke: '#d7d7d7'});

      function vertBottomlineg1Animation(){

            vertBottomline2b.attr({stroke: '#4daf7c'});
            vertBottomline2b.stop().animate({'y1': '100'}, 400, mina.linear,
             function() {
              vertBottomcircle1.stop().animate({'fill': '#4daf7c'}, 200, mina.linear,
              function() {
                jQuery('#reff').addClass('activeClass');
                jQuery('#refToAppear').addClass('appeared');
                s2lineg1Animation();
              });

             });
      }


      // Left line

      var s1 =  Snap("#svg1").attr({width:"424",height:"126"});
      s1.attr({preserveAspectRatio:"none"});
      s1.attr({viewbox:"0 0 424 126"});

      // Horizontal Line

      var line1a = s1.line(424,0,0,0).attr({strokeWidth:2,strokeLinecap:"round"});
      var line1b = s1.line(0,0,424,0).attr({strokeWidth:2,strokeLinecap:"round"});
      
      // Vertical line

      var line2a = s1.line(0,100,0,0).attr({strokeWidth:2,strokeLinecap:"round"});
      var line2b = s1.line(0,0,0,0).attr({strokeWidth:2,strokeLinecap:"round"});

      var circle1 = s1.circle(0,100,5);
      circle1.attr({ id: 'circle_1' });

      // Elements group
      var lineg1 = s1.g(circle1, line1a, line1b, line2a, line2b);

      lineg1.attr({fill:"#d7d7d7", stroke: '#4daf7c'});
      line1b.attr({stroke: '#d7d7d7'});
      line2b.attr({stroke: '#d7d7d7'});
      line2a.attr({stroke: '#d7d7d7'});
      circle1.attr({stroke: '#d7d7d7'});



      // Infinite animation for the sun rays
      function lineg1Animation(){

         line1b.stop().animate({'x2': '0'}, 400, mina.linear,
          function() {
            line2b.attr({stroke: '#4daf7c'});
            line2b.stop().animate({'y1': '100'}, 400, mina.linear,
             function() {
              circle1.stop().animate({'fill': '#4daf7c'}, 200, mina.linear,
              function() {
                // lineg1Animation(); // Repeat this animation so it appears infinite.

                // Add class to p

                jQuery('#prof').addClass('activeClass');
                jQuery('#profToAppear').addClass('appeared');

                vertBottomlineg1Animation();
              });

             });

          });
      }

      // Right animation

      var s2 =  Snap("#svg2").attr({width:"424",height:"126"});
      s2.attr({preserveAspectRatio:"none"});
      s2.attr({viewbox:"0 0 424 126"});

      // Horizontal Line

      var s2line1a = s2.line(424,0,0,0).attr({strokeWidth:2,strokeLinecap:"round"});
      var s2line1b = s2.line(0,0,424,0).attr({strokeWidth:2,strokeLinecap:"round"});
      
      // Vertical line

      var s2line2a = s2.line(424,100,424,0).attr({strokeWidth:2,strokeLinecap:"round"});
      var s2line2b = s2.line(424,0,424,0).attr({strokeWidth:2,strokeLinecap:"round"});

      var s2circle1 = s2.circle(424,100,5);
      s2circle1.attr({ id: 'circle_2' });

      // Elements group
      var s2lineg1 = s2.g(s2circle1, s2line1a, s2line1b, s2line2a, s2line2b);

      s2lineg1.attr({fill:"#d7d7d7", stroke: '#4daf7c'});

      s2line1b.attr({stroke: '#d7d7d7'});
      s2line2b.attr({stroke: '#d7d7d7'});
      s2line2a.attr({stroke: '#d7d7d7'});
      s2circle1.attr({stroke: '#d7d7d7'});

      // Infinite animation for the sun rays
      function s2lineg1Animation(){

         s2line1b.stop().animate({'x1': '424'}, 400, mina.linear,
          function() {
            s2line2b.attr({stroke: '#4daf7c'});
            s2line2b.stop().animate({'y1': '100'}, 400, mina.linear,
             function() {
              s2circle1.stop().animate({'fill': '#4daf7c'}, 200, mina.linear,
              function() {
                jQuery('#employr').addClass('activeClass');
                jQuery('#employrToAppear').addClass('appeared');

                // Repeat the animation
                setTimeout(startAnimation, 1000)
              });
             });

          });
      }

      // Clear all function

      function clearAll() {
        line1b.attr({ 'x2': '424'}); // Reset the position of the rays.
        line2b.attr({ 'y1': '0', stroke: '#d7d7d7'}); // Reset the position of the rays.
        circle1.attr({fill: '#d7d7d7'});
        s2line1b.attr({ 'x1': '0'}); // Reset the position of the rays.
        s2line2b.attr({ 'y1': '0', stroke: '#d7d7d7'}); // Reset the position of the rays.
        s2circle1.attr({fill: '#d7d7d7'});
        vertBottomline2b.attr({ 'y1': '0', stroke: '#d7d7d7'}); // Reset the position of the rays.
        vertBottomcircle1.attr({fill: '#d7d7d7'});
        vertTopline2b.attr({ 'y1': '0', stroke: '#d7d7d7'}); // Reset the position of the rays.
        vertTopcircle1.attr({fill: '#d7d7d7'});

        jQuery('#prof').removeClass('activeClass').addClass('active');
        jQuery('#reff').removeClass('activeClass').addClass('active');
        jQuery('#employr').removeClass('activeClass').addClass('active');

      }

      /****** Run animations ******/
      startAnimation();

    }
  };
}]);