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

Go to solution Solved by GreenSock,

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

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

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

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

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

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

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

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
Link to post
Share on other sites
  • 2 weeks later...

Thanks Jack - Yes, all solved. :)

  • Like 1
Link to post
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.

×