Animating an SVG filter variable on hover

[ownage]

First off, thank you for the MOST EXCELLENT plugin TweenMax! I couldn't find ANY OTHER WAY to animate this variable than through <animate> which by itself really appears to be hard to work with on multiple paths within a single SVG.

 

My goal is to animate feGaussianBlur's variable "stdDeviation" from 0 to 7 on mouse in.... and 7 to 0 on mouse out... not just once, but an unlimited number of times. While the first path object is still animating, the second path object should also be able to animate separately. It's not just two paths though, and my attempts to fix this with a couple "setTimeouts" is questionable-- in reality I will actually have 68 different paths that would technically require separate/individualized animation. I'm not sure if my approach is on the right track, but I'm pretty new to this and would really appreciate your support!

 

Thank you again!

See the Pen arQENZ by ownage (@ownage) on CodePen.

[OSUblake]

Make one animation per path/filter. On mouseleave, .reverse() the animation. On mouseenter, .play() the animation.

 

See the Pen 4a385474064f25b90af6f0227c89363c by osublake (@osublake) on CodePen.

 

 

 

[ownage]

I owe a HUGE thank you to you... You, sir, are an intellect, gentleman and scholar! This has got to be as clean as it gets.

 

Looks like this will work just fine with TweenLite as well?

 

Thank you!

[ownage]

P.S. I tried this with TweenLite and am not sure why this isn't working as play() & reverse() are both in the docs. Just wanted to verify...

 

See the Pen arPRgj by ownage (@ownage) on CodePen.

 

w/ TweenMax:

 

See the Pen NVeRMJ by ownage (@ownage) on CodePen.

[OSUblake]

1 hour ago, ownage said:

P.S. I tried this with TweenLite and am not sure why this isn't working as play() & reverse() are both in the docs. Just wanted to verify...

 

play and reverse are working fine. The problem is that you're missing the AttrPlugin, which comes with TweenMax.

https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/plugins/AttrPlugin.min.js

 

 

[ownage]

1 minute ago, OSUblake said:

 

play and reverse are working fine. The problem is that you're missing the AttrPlugin, which comes with TweenMax.

https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/plugins/AttrPlugin.min.js

 

 

Got it. Stupid mistake, again, you're the man! Thank you for all of your support!

 

Matt