Jump to content
GreenSock

mikemms

Chrome not animating SVG clipPath text

Go to solution Solved by PointC,

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

Chrome is not animating SVG > clipPath > text

The code is working perfectly in Firefox but not in chrome(and IE but I don't care about IE).

 

I've only been playing with SVG and GSAP for a few days now. Am I doing something wrong?

 

 

chrome: Version 52.0.2743.116 m

 

thanks.

See the Pen VjgvXQ by anon (@anon) on CodePen

Link to comment
Share on other sites

  • Solution

Hi mikemms :)

 

Welcome to the GreenSock forums. 

 

Rather than use the SVG clip-path on an HTML element, why not drop the image into the SVG? You can use the SVG <image> element and place your .jpg right in there and it will scale nicely. You have to remember to set a width and height or it won't render.

 

I've made a fork of your pen to show this solution:

 

See the Pen Gqzoja by PointC (@PointC) on CodePen

 

That should work in Chrome and FF. Edge and IE are another story. Oddly, the text in the clip-path wasn't moving in Edge or IE, but I've used clip-paths with them before and everything has been fine so I was a bit puzzled. The only difference being that this is text and I had always used shapes. I tried putting a rectangle in the clip-path along with the text and for some reason, IE and Edge work fine. The rectangle in the clip-path has no width or height, but without it, the text won't animate in the MS browsers. I left the rectangle in the pen with some comments so you can see what I mean. I can't explain this behavior. 

 

Hopefully this helps a little bit.

 

Happy tweening.

:)

  • Like 3
Link to comment
Share on other sites

Thank you! you are incredible! everything works now even IE!

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