kgrote
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by kgrote
-
-
Hey Jonathan!
I was just about to post that I figured out the reason I was getting buggy behavior is because I was targeting the <clipPath> element with GSAP instead of the <path> element inside the <clipPath>. Works like a charm in Webkit & Edge, but obviously still not FF because of the above mentioned clipPath transform bug, which I can live with.
Here's a codepen so you can see my handywork:
-
I'm getting buggy behavior with clipPath transforms in Edge also. Specifically trying to use scale on a polygon clipPath, Edge can't seem to render the animation - the end position will suddenly appear if you click the SVG canvas. It doesn't seem to be exclusive to polygon, though, as I had the same experience with rectangle (rectangle actually gave me similarly buggy behavior in Chrome also). X and Y position transforms seem to work fine.
All and all, support for transforming clipPath seems to be pretty crappy at the moment.
UPDATE: Figured out the issue, see comment below.
Animating SVG Masks (clip-path) not working in FireFox
in GSAP
Posted
Good info, thanks Jonathan.
UPDATE: Here's the same pen using the Attr plugin - works in all browsers! Yay!
See the Pen mPxzZY by kgrote (@kgrote) on CodePen