Jump to content
Search Community

Tween clippath on mouseover

kathryn.crawford test
Moderator Tag

Go to solution Solved by Jonathan,

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

I'm trying to get this tween to work with an eventListener, and it works fine if I pull it out of it, but as soon as it's back in the event listener, nothing happens. I've also tried doing it with jquery and using .play() and .pause() and I am getting the same issue. I also tried setting the event listener to the clippath itself, rather than the circle, and no joy. No idea what's wrong here! I'm working directly off this other codepen and it works fine there. 

See the Pen OVeWNB by rorytawn (@rorytawn) on CodePen

See the Pen JYvdzx by kathryncrawford (@kathryncrawford) on CodePen

Link to comment
Share on other sites

  • Solution

Firefox and IE will not render elements in a <def> tag, since they honor the SVG spec. The issue is due to trying to animate something in a <def> tag. <def> tags are not directly rendered in SVG with CSS.

 

For this you will have to use the GSAP AttrPlugin when accessing SVG elements inside <def>, <symbol>, and <use> tags. Since they are not directly rendered and accessible with CSS. But their attributes are!

 

You will need to animate the radius attribute (r) of the shape.

 

See the Pen OyZzQB by jonathan (@jonathan) on CodePen

 

Taken from the SVG <def> spec:

  • SVG allows graphical objects to be defined for later reuse. It is recommended that, wherever possible, referenced elements be defined inside of a defs element. Defining these elements inside of a defs element promotes understandability of the SVG content and thus promotes accessibility. Graphical elements defined in a defs will not be directly rendered. You can use a <use> element to render those elements wherever you want on the viewport.
var clip = document.getElementById("clip1");
var circles = document.getElementById("circle1");
var wrapper = document.getElementById("wrapper");

wrapper.addEventListener("mouseenter", expand);
wrapper.addEventListener("mouseleave", contract);

function expand() {
  TweenMax.to(clip, 0.5, {
    attr: {
      r: 120
    },
    transformOrigin: "50% 50%",
    ease: Power4.easeInOut
  });

}

function contract() {
  TweenMax.to(clip, 0.5, {
    attr: {
      r: 60
    },
    transformOrigin: "50% 50%",
    ease: Power4.easeInOut
  });

}

The MorphSVGPlugin accesses the SVG shape attributes (d, points), that is why

See the Pen JYNRVN by osublake (@osublake) on CodePen

works on hover.

 

Resource:

GSAP AttrPlugin: http://greensock.com/docs/#/HTML5/GSAP/Plugins/AttrPlugin/

W3C SVG 2.0: https://svgwg.org/svg2-draft/struct.html#Head

SVG <def> tag: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs

 

:)

  • Like 3
Link to comment
Share on other sites

That is one of the most widely asked questions i answer with SVG and GSAP in the GreenSock Forums. It always has to do with trying to animate SVG elements inside <def>, <symbol>, and <use> tags without the AttrPlugin. Since most users that use GSAP on SVG will not realize they are really using the CSSPlugin. The SVG spec does not allow direct rendering of them with CSS. But as a rule of thumb, any SVG elements inside those above tags (<def>, <symbol>, and <use> tags) need to be animated with the AttrPlugin or MorphSVGPlugin. And then they will animate the buttery goodness cross browser :)

  • Like 1
Link to comment
Share on other sites

That one circle was blocking the events because it was in front of it, so that was part of the problem. But animating clip-paths and mask is never fun. There always seems to be some kind of weird gotcha going on in one of the browsers.

So basically I just moved the other circle behind the event handler one and it worked fine. Sometimes, programming makes me crazy. Thanks for the help! I knew it must be something obvious going on.

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