Issues animating an mask image inside an svg element

[Chris]

Hello!

 

To be able to animate masks, I started using svg. My goal was to keep it really simple and also have support for all browsers (incl. mobile) and IE10+.

 

I found this site, which described a way to achieve what I want in a perfect way:

https://thewebstorebyg.wordpress.com/2013/12/29/cross-browser-svg-masking-supports-ie8-ie9-ie10-firefox-chrome/

 

Based on that info, and a post on this forum recommending to use the AttrPlugin to be more cross browser compatible, I've created this:

 

 

While it works great in all browsers, I'm running into some issues:

 

1. I'm getting an error

TweenMax.min.js:16 Error: <image> attribute y: Expected length, "null"

TweenMax.min.js:16 Error: <image> attribute x: Expected length, "null"

 

2. I'm not able to use "scale" at all or independently change "width", or "height" properly.

 

 

Any help would be great!

 

Thanks.

 

See the Pen gMpaVX?editors=1010 by treemok (@treemok) on CodePen

[ohem]

I'm not sure what's causing those errors, but everything seems to be fine if it's animated without the AttrPlugin; just tweening the image directly.  Scaling works too:

See the Pen OXVMOB by ohem (@ohem) on CodePen

[GreenSock]

I think the problem was simply that you neglected to define x and y attributes on the element, like x="0" y="0", so when GSAP tried to get the starting values they were literally "null" which is difficult to tween from. 

 

Solution: add x="0" and y="0" to your element.

[PointC]

yep - adding those x/y attributes should make everything work for you. I made this as an answer to another question a couple months ago, but it's a good reference for a simple SVG mask.

 

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

 

Happy masking.

[Chris]

I'm not sure what's causing those errors, but everything seems to be fine if it's animated without the AttrPlugin; just tweening the image directly. 

 

Without AttrPlugin it won't work in Firefox and IE.

 

Solution: add x="0" and y="0" to your element.

 

Great, that took care of the errors, thanks! But why can I not adjust the scale, or width and height independently?

 

See the Pen XKbgdx by treemok (@treemok) on CodePen

[ohem]

Without AttrPlugin it won't work in Firefox and IE.

 

 

Great, that took care of the errors, thanks! But why can I not adjust the scale, or width and height independently?

 

See the Pen XKbgdx by treemok (@treemok) on CodePen

Oh wow, I didn't realize that.   My mistake.

[GreenSock]

I see width and height being animated independently as expected. What leads you to believe those aren't working? 

 

As for "scale", that's not an attribute. Scaling is done in the transform. My understanding is that some browsers aren't great at rendering transforms on clipping paths though (admittedly I haven't done much testing myself, but I think I've heard this from other people who have). 

[PointC]

Width and height are no problem for a mask or clip-path. Scale is a whole different matter. Here's a pen showing two circles. One revealed by a mask and the other by a clip-path.

 

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

 

You'll see that scale will actually work in some browsers, but is not the way to go for cross-browser support. It's best to stick with width/height and x/y to animate masks and clip-paths.

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mask

 

If you'd like to skip the masks and clip-paths, you can also animate the viewBox for some nice reveals and animations. I wrote about that in the SVG Gotchas thread here:

 

http://greensock.com/forums/topic/13681-svg-gotchas/?p=57502

 

Hopefully that helps a little bit.

 

Happy tweening.

[Chris]

I see width and height being animated independently as expected. What leads you to believe those aren't working? 

 

As for "scale", that's not an attribute. Scaling is done in the transform. My understanding is that some browsers aren't great at rendering transforms on clipping paths though (admittedly I haven't done much testing myself, but I think I've heard this from other people who have). 

 

I've adjusted the codepen to make it more clear. Width should be 500px and height 50px at the end of the animation. But both are 50px. It's also not finishing at x:0, y:0 either...

 

See the Pen XKbgdx by treemok (@treemok) on CodePen

[GreenSock]

I just checked Dev Tools and it looks like GSAP is doing exactly what it's supposed to. The x and y attributes are both 0, width is 500, and height is 50. Am I looking in the wrong place? Are you just saying that the browser itself isn't rendering things properly (even though GSAP is setting the attributes exactly the way you requested)? 

[ohem]

I see the issue.  It seems to be scaling uniformly instead of stretching/squishing it.  I see this in the latest versions of Chrome, Safari, and Firefox on my Mac.

 

Even though it says the width is 500px, the actual appearance of the image doesn't seem to match that.

[Chris]

Am I looking in the wrong place? Are you just saying that the browser itself isn't rendering things properly (even though GSAP is setting the attributes exactly the way you requested)? 

 

I've attached the "actual" look, and what it "should be". Instead of being stretched 500px, and at the top left (0px, 0px) it shows up in the top right and it's only 50px wide.

[GreenSock]

Oh! Now I understand - you were just missing the  preserveAspectRatio attribute on your <image>. Remember, in SVG, by default it'll preserve the aspect ratio and fit within the size provided, so you want to turn that off, like 

<image id="end_maskImg" preserveAspectRatio="none" x="0" y="0" width="499" height="400" xlink:href="http://www.christiantants.com/assets/masking/end_mask.png" />

That had nothing to do with GSAP. You could remove GSAP from the equation entirely and hard-code the values you had in there and you'd see the same behavior. 

 

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio

 

Does that solve things for you? 

[Chris]

Thanks Jack - Yes, all solved.