CODEWITHSUNDEEP
jquerycsssvgjquery-animatesnap.svg
SftLmt
SftLmt

Reputation: 41

Set Bounding Box to Animate Elements within Grouped SVG on Hover with Snap.svg

I'm new to Snap.SVG and have run into a little issue. I've got a little SNAP.svg animation that I'd like to run on Hover. It's basically a WAVE effect where each letter jumps individually on hover of the entire element. I've got the basic effect working... BUT, the hover not only works on the whole element, but also on the individual elements. That is, I can hover the box and get the wave, and I can hover the letters to get the wave. So, basically, as long as the mouse is within the primary container and moving around, the letters are jumping all over the place. Would like to tame this so it only happens on HOVER of the entire container. Any thoughts? I'm sure there's a more efficient way to do this... but this is where I currently am.

Simplified fiddle here: http://jsfiddle.net/8j11b0q4/1/

HTML

<svg id="logo" viewBox="0 0 400 100"></svg>

CSS

#logo {fill:#303030;width:200px;height:100%;}
#logo:hover {transition: fill .4s ease-in-out; fill:#4bd1c7;}
#logo:active {transition: fill .02s ease-in; fill:#ccc;}

JS

var s = Snap("#logo");

var a = s.path("M58.536 69.744H29.817l-3.99 13.513H0L30.768 1.396h27.592L89.12 83.257H62.631L58.536 69.744z M53.289 52 l-9.036-29.427l-8.941 29.427H53.289z").addClass("a");
var b = s.path("M103.506 1.396h47.352c7.892 0 13.9 2 18.2 5.863c4.225 3.9 6.3 8.7 6.3 14.5 c0 4.84-1.508 8.99-4.523 12.453c-2.01 2.309-4.952 4.132-8.823 5.472c5.881 1.4 10.2 3.8 13 7.3 c2.773 3.4 4.2 7.8 4.2 12.982c0 4.244-0.987 8.06-2.959 11.447c-1.974 3.388-4.672 6.068-8.097 8 c-2.122 1.228-5.324 2.122-9.604 2.68c-5.695 0.745-9.474 1.117-11.335 1.117h-43.667V1.396z M129.025 33.504h11 c3.945 0 6.691-0.679 8.236-2.038c1.544-1.358 2.317-3.323 2.317-5.891c0-2.382-0.773-4.244-2.317-5.584 c-1.545-1.34-4.235-2.01-8.069-2.01h-11.168V33.504z M129.025 65.667h12.899c4.355 0 7.427-0.772 9.214-2.317 c1.787-1.544 2.68-3.62 2.68-6.226c0-2.419-0.885-4.364-2.652-5.835c-1.769-1.47-4.868-2.206-9.297-2.206h-12.843V65.667z").addClass("b");
var c = s.path("M253.192 49.753l22.169 6.701c-1.489 6.217-3.835 11.41-7.036 15.579c-3.202 4.169-7.176 7.315-11.922 9.4 c-4.746 2.122-10.786 3.183-18.12 3.183c-8.897 0-16.165-1.293-21.805-3.878c-5.64-2.585-10.507-7.132-14.602-13.643 c-4.095-6.51-6.142-14.844-6.142-25c0-13.541 3.602-23.948 10.805-31.221C213.742 3.6 223.9 0 237.1 0 c10.311 0 18.4 2.1 24.3 6.254c5.9 4.2 10.3 10.6 13.2 19.209l-22.336 4.97c-0.781-2.494-1.601-4.318-2.457-5.472 c-1.415-1.935-3.146-3.425-5.192-4.467c-2.048-1.042-4.338-1.563-6.868-1.563c-5.733 0-10.126 2.306-13.179 6.9 c-2.309 3.421-3.462 8.793-3.462 16.117c0 9.1 1.4 15.3 4.1 18.657c2.754 3.4 6.6 5 11.6 5 c4.839 0 8.496-1.358 10.972-4.076C250.279 58.9 252.1 54.9 253.2 49.753z").addClass("c");
var d = s.path("M294.27 1.396h37.58c7.407 0 13.4 1 18 3.016c4.56 2 8.3 4.9 11.3 8.7 c2.978 3.8 5.1 8.1 6.5 13.123c1.34 5 2 10.3 2 15.858c0 8.749-0.996 15.533-2.987 20.4 c-1.991 4.821-4.756 8.86-8.292 12.117c-3.537 3.258-7.334 5.426-11.392 6.505c-5.547 1.489-10.572 2.233-15.076 2.233h-37.58 V1.396z M319.565 19.935v44.727h6.198c5.286 0 9.046-0.586 11.28-1.759c2.233-1.173 3.982-3.22 5.249-6.142 c1.265-2.922 1.898-7.659 1.898-14.211c0-8.673-1.416-14.611-4.244-17.813c-2.829-3.201-7.521-4.802-14.071-4.802H319.565z").addClass("d");

var g = s.group(a,b,c,d);

var myMatrix = new Snap.Matrix();
myMatrix.translate(0,-15);
var InvertedMatrix = myMatrix.invert(0,0);

s.hover (function() {
a.animate({ 
  transform: myMatrix },80, mina.easeinout, function() { 
  a.animate({ 
    transform: InvertedMatrix }, 80, mina.easeinout) 
 });
b.animate({ 
  transform: myMatrix }, 95, mina.easeinout, function() { 
  b.animate({ 
    transform: InvertedMatrix }, 95, mina.easeinout)
 });
c.animate({ 
  transform: myMatrix },110, mina.easeinout, function() { 
  c.animate({ 
    transform: InvertedMatrix }, 110, mina.easeinout) 
 });
d.animate({ 
  transform: myMatrix },125, mina.easeinout, function() { 
  d.animate({ 
    transform: InvertedMatrix }, 125, mina.easeinout) 
 });
});

Thanks!

Upvotes: 0

Views: 571

Answers (1)

methodofaction
methodofaction

Reputation: 72405

In order to prevent the animation from triggering again you can add the following CSS declaration:

#logo path {pointer-events: none;}

http://jsfiddle.net/2xbduefo/

Upvotes: 1

Related Questions