CODEWITHSUNDEEP
jqueryhtmlcssanimationsvg
Zlerp
Zlerp

Reputation: 467

Pause css animation on hover out, and continue from point

I am trying to add a svg path animation on hover, and reverse the animation on mouseOut.

how do i pause the animation if the mouseOut is before the mouseOn animation is finished, and reverse it from that keyframe?

also, if the animation is being reversed, and you hover on it in the middle of the animation, I would like the reversed animation to stop, and play forward from that point.

Please see Fiddle as example

I am also using jquery to add attrs to the elements. Do i need to only use css to complete this? 

$(document).ready(function() {
  $('svg').hover(function() {
    /* Stuff to do when the mouse enters the element */
    $(this).find('circle').fadeIn(100);
    $(this).find('circle').attr("class", "social-circle movingCirc");
    console.log('on');
  }, function() {
    /* Stuff to do when the mouse leaves the element */
    $(this).find('circle').attr("class", "social-circle removingCirc");
    $(this).find('circle').delay(1900).fadeOut(100);
    console.log("hover off");
  });
});

Thanks for your help

Upvotes: 1

Views: 625

Answers (1)

Talmid
Talmid

Reputation: 1401

I don't know if the stroke-dashoffset animation "stop and reverse" can be done with purely CSS animation, but here is a fork of your fiddle with a solution that uses jquery animate.

Here is the javascript:

$(function() {
  var $svg = $('svg');
  var $circle = $('circle', $svg);

  $svg.hover(function() {
    /* Stuff to do when the mouse enters the element */
    $circle
      .stop()
      .animate({
        'stroke-dashoffset': 0
      }, 2000);
  }, function() {
    /* Stuff to do when the mouse leaves the element */
    $circle
      .stop()
      .animate({
        'stroke-dashoffset': 900
      }, 2000);
  });
});

Upvotes: 1

Related Questions