Hover clip-path not updating on resize animation

[wcomp]

I have a div that activates a MorphSVG clip-path animation on hover by morphing #cpsource to #cpsource2 using this code:

 

tl2.to("#cpsource", .3, {morphSVG: {shape:"#cpsource2", shapeIndex: 0}, ease:Linear.easeInOut}, 0);

 

When you CLICK on the div, it animates its size to twice the width and twice the height. I would like to animate FROM #cpsourse2 to#cpsourse2big when the div is clicked and enlarged so that the enlarged state has its own unique clip-path. I attempted to do that by using:

 

tl2num3.to("#cpsource2", .3, {morphSVG: {shape:"#cpsource2big", shapeIndex: 0}, ease:Linear.easeInOut}, 0);

 

The hover animation in its enlarged state, however, does not seem to be picking up #cpsource2big. Instead it behaves as if the "d" attribute of #cpsourse2 hasn't been morphed at all.  When viewing the "d" attribute of #cpsource2 using chrome's inspector, I can see that its values change to #cpsource2big on click like it should, but the hover animation in the enlarged state doesn't pick up on the fact that the "d" attribute of #cpsourse2 has now changed to that of #cpsource2big. What am I missing? I'm sure its really simple. Lol. Appreciate any help!

See the Pen gZvzjb by Wcomp (@Wcomp) on CodePen

[GreenSock]

I think you're just targeting the wrong thing. You're morphing cpsource's "d" to cpsource2...but remember that cpsource is still the element that's used as a clipping path (all you did was update the "d" values). So when you morph cpsource2's "d" attribute to be cpsource2big, GSAP does exactly what you ask, but that has no effect on things visually because your clip-path is still pointing to cpsource (the other element). Maybe you just need to change the target of that tween from cpsource2 to cpsource. 

[wcomp]

5 hours ago, GreenSock said:

I think you're just targeting the wrong thing. You're morphing cpsource's "d" to cpsource2...but remember that cpsource is still the element that's used as a clipping path (all you did was update the "d" values). So when you morph cpsource2's "d" attribute to be cpsource2big, GSAP does exactly what you ask, but that has no effect on things visually because your clip-path is still pointing to cpsource (the other element). Maybe you just need to change the target of that tween from cpsource2 to cpsource. 

I feel silly now. Lol. Thanks! I got it to work.