Jump to content

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

Problem animating image inside a svg clipPath on Chrome

Recommended Posts

Hey there,


I'm trying to use TweenMax to animate an image inside a SVG clipPath.


The problem is: when the transition is happening, the clipPath deactivate on Chrome and appears only after animation stops. On Safari and Firefox works just fine.


Anyone can help me? Is a compatibility issue or am I doing something wrong?


Thanks guys!

See the Pen zoBzQN by marcioshiz (@marcioshiz) on CodePen

Link to comment
Share on other sites

Browser support for clip-path isn't great, and it's even worse for animated clip-paths unfortunately. Looks like a Chrome bug that can't be worked around (as far as I know at least). I wish I had better news for you. If you need advanced masking, you might want to look into canvas or pure SVG (rather than an SVG mask on a regular DOM element).

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