Issues with setTimeout

I am using TweenLite to complete some SVG animations, but for some reason every time i reload the page, the first time I hover the element with the animation, the durration of the animation is instant. Then after the first time the hover effect is added instantly, the animation works properly.

CodePen

Just reload the page, hover the object and you will see the error I am receiving.

  $('svg').hover(function() {
    /* Stuff to do when the mouse enters the element */
    var currentCirc = $(this).find('.social-circle');
      currentCirc.stop()
      .animate({'stroke-dashoffset': 0}, 1000);
      TweenLite.to(currentCirc, 1, {fill:'rgb(144, 17, 133)'});
      console.log('on');
  }, function() {
    /* Stuff to do when the mouse leaves the element */
    var currentCirc = $(this).find('.social-circle');
      currentCirc.stop()
      .animate({
        'stroke-dashoffset': 900
      }, 1000);
      TweenLite.to(currentCirc, 1, {fill:'none'});
      // .css('fill', 'none');
  });

Thanks for your time!

Solution

The main problem is not in the javascript, but in the CSS. The .social-circle class does not have a fill, which means it is actually #000.

.social-circle {
    stroke-dasharray: 900;
    stroke-dashoffset: 900;
    fill: rgba(144, 17, 133, 0);
}

This solves the initial animation, you may or may not have noticed that the 'fill'-animation uses a somewhat bright-colored transition from 'nothing' to the purple. This seems to be because TweenLite interprets fill: 'none' as fill: rgba(255, 255, 255, 0) (the latter being transparent white, which in itself is not visible, but the steps in the transition are). This is why I opted for the transparent version of your color in the code above.

Now that your question is answered, I feel like I should take some time to help you reducing the overall complexity of your solution. The way I see it, you have used two different (and rather large) javascript libraries to achieve what should have been a very simple CSS declaration.

.social-circle {
    stroke-dasharray: 900;
    stroke-dashoffset: 900;
    fill: rgba(144, 17, 133, 0);
    transition: stroke-dashoffset 1s linear, fill 1s ease-in-out;
}
.social-circle:hover {
    stroke-dashoffset: 0;
    fill: rgba(144, 17, 133, 1);
}

With this style, you can drop all of the javascript, as demonstrated in this pen.