Jump to content
GreenSock

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

Issues animating an mask image inside an svg element

Recommended Posts

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:

https://codepen.io/treemok/pen/gMpaVX?editors=1010

 

 

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.

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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. :)

  • Like 3

Share this post


Link to post
Share on other sites

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.

:)

  • Like 3

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

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.

:)

  • Like 5

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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)? 

Share this post


Link to post
Share on other sites

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.

  • Like 2

Share this post


Link to post
Share on other sites

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.

post-1328-0-91130200-1465271363_thumb.jpg

post-1328-0-08271300-1465271370_thumb.jpg

Share this post


Link to post
Share on other sites

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? 

  • Like 4

Share this post


Link to post
Share on other sites

Thanks Jack - Yes, all solved. :)

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×