Jump to content
Search Community

Problem with Chrome and SVG animating clip-path

foumfo test
Moderator Tag

Go to solution Solved by foumfo,

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

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?



I attached the screenshot


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

Link to comment
Share on other sites

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


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. 

  • Like 4
Link to comment
Share on other sites

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.



  • Like 2
Link to comment
Share on other sites

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. 

  • Like 3
Link to comment
Share on other sites

  • Solution

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});

Obviously easing and probably complete where creating problems to the animations

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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!

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