Jump to content


Adding / Removing Stored Tween to Specific Elements

Moderator Tag

Recommended Posts

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?



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

Link to comment
Share on other sites



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.

  • Like 3
Link to comment
Share on other sites

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");
    TweenMax.to(this.filter, 1, {attr:{values:1}});
    TweenMax.to(this.filter, 1, {attr:{values:0}});



Note: its important that each filter has a unique id

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.