Tween clippath on mouseover

[kathryn.crawford]

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

[OSUblake]

Are you trying to do an image? If so, check out this pen. It will work in IE.

 

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

 

The way your example is setup right now, there is a circle blocking the circle trying to receive events. 

[OSUblake]

It looks like that one was setup like the one I linked to. Something is happening in IE with the events, and wrapping a div around the svg works, but that's messy. What are trying to do exactly?

 

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

[Jonathan]

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

 

[kathryn.crawford]

@OSUBlake, I have the other circle there because I planned to fade one out as the radius of both were tweened. I hadn't gotten to that part of the code yet, I just wanted to get the hover to work. And yeah, eventually one of the circles will be an image, and the other an svg element.

[OSUblake]

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.

[Jonathan]

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

[kathryn.crawford]

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.

[kathryn.crawford]

Got it working with an image! Thanks so much for you guys' help!