Jump to content
GreenSock

dada78

Adding / Removing Stored Tween to Specific Elements

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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?

 

Thanks!

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

Link to comment
Share on other sites

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.

  • 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");
  
  $(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

  • 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.
×