Problem with Chrome and SVG animating clip-path

[foumfo]

Hello everyone, I've created a tweenmax that alters a clip-path from an external svg file. While it does seem to work, there is a problem with the rendering as you'll see in the attached pic. Once I hover over the div with the cursor then it changes immediately to the correct clip-path. What could be the issue here?

 

EDIT

I attached the screenshot

See the Pen qNaQXj by foumfo (@foumfo) on CodePen

[Carl]

Hi and welcome to the GreenSock forums,

 

It appears there is no image to see.

 

Its much better to create a very simple demo that we can test and edit. We recommend CodePen
http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Please see if you can replicate the problem with a very simple inline SVG in CodePen. If not you can zip a very simple example.

FWIW GSAP can do very little to impact rendering imperfections in the browser. 

 

This technique from Blake works great in Chrome: http://codepen.io/osublake/pen/JYNRVN

Note it uses our MorphSVGPlugin which is for Club GreenSock members. 

[foumfo]

I tried to post a codepen but there are too many issues with it because my code needs many external files.

 

EDIT

I added the codepen.

[foumfo]

Anyone?

[Jonathan]

Hello foumfo, I'm not near my computer right now.

 

But i notice in your codepen, you are mixing jQuery css() and jQuery animate() with GSAP. You want to be careful not to animate, set or get any CSS properties outside of GSAP with the jQuery css() or animate() method. Otherwise GSAP will be unable to keep track of what CSS properties are changed outside itself.

 

[Carl]

Sorry, we don't get notified when posts are edited.

 

I took a quick look at the demo but I'm not sure what I'm supposed to be seeing.

If the issue is that a path is not animating properly the demo should only include an svg with a single shape and a single tween that is trying to animate that path.

The key is to reduce the demo as much as possible so that we can focus on the 1 thing that is the issue.

 

I'm seeing jquery errors in the console and as Jonathan suggested, its best to remove everything that isn't absolutely necessary to replicate the problem such as jQuery animations or TweenMax animations on width or other properties. 

 

Also I noticed that the svg had a  bunch of filters and you had php code in the html. 

 

Once you reduce we can determine if there is a problem with the AttrPlugin or a rendering issue with Chrome and clip-paths. In fact the first thing I would suggest with your reduced test case is to animate a path that isn't a clip-path to better isolate where the issue may be. 

[foumfo]

Ok so I tidied up my js code, and I've found the source of my issues. I had to change this:

$(this).animate({width:300, height:300}, {duration:300, easing:"easeOutStrong", complete:tweentoshieldclip});});

to this:

$(this).animate({width:300, height:300}, {duration:300});
tweentoshieldclip();

Obviously easing and probably complete where creating problems to the animations

[Jonathan]

foumfo that code is jquery animate() method, and not a GSAP issue. Did you have a specific question about the GSAP API ?

[foumfo]

foumfo that code is jquery animate() method, and not a GSAP issue. Did you have a specific question about the GSAP API ?

I thought that by using the jquery.gsap.js plug-in, the GSAP API takes over control of the jquery.animate() method

[Carl]

I thought that by using the jquery.gsap.js plug-in, the GSAP API takes over control of the jquery.animate() method

 

 

Yes it does, but it wasn't  clear to us that was your intention.

The jquery.gsap tool is really meant for people just to test how GSAP can perform better. Once you get familiar with TweenLite/TweenMax there really isn't any need for $.animate()

 

Glad you got it sorted out.

 

Happy Tweening!