Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
kathryn.crawford

Tween clippath on mouseover

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

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. 

  • Like 2
Link to comment
Share on other sites

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

  • Like 1
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

@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.

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.

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