Adding / Removing Stored Tween to Specific Elements

[dada78 31 Likes (Newbie)]

Hi guys,

 

As you can see in my codepen, I have a couple of svgs that have a filter applied. I would like to be able to apply the tweens I stored in the "addClass" and "removeClass" variable to specific id elements. How would I be able to achieve this? So that I can toggle the saturation. Any ideas?

 

Thanks!

See the Pen b51f676e56198ee88e66b35e11321fba by dada78 (@dada78) on CodePen

[Carl 9,066 Likes (Superhero)]

Hi!

 

SVGs aren't really my area or expertise but I'm pretty sure you will need unique filter definitions for each SVG. 

Right now you have multiple SVGS with the same filter applied. When you animate the filter's attributes all svgs that use it will be updated.

 

If you make your pen public others will be able to fork and perhaps have more luck with a solution.

[Carl 9,066 Likes (Superhero)]

just messing around with that idea here is an example of having the saturation of each svg change on hover

 

$("svg").each(function(index, element){
  
  //find the filter for each svg
  element.filter = $(this).find("feColorMatrix");
  
  $(this).mouseenter(function(){
    TweenMax.to(this.filter, 1, {attr:{values:1}});
  });
  $(this).mouseleave(function(){
    TweenMax.to(this.filter, 1, {attr:{values:0}});
  });
})

http://codepen.io/GreenSock/pen/QGJJLB?editors=0010

 

Note: its important that each filter has a unique id