Jump to content
Search Community

masking with clipPath and svg

kaplan test
Moderator Tag

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

Hi,

 

I wanted to start a discussion for feedback and thoughts on the best ways to do some masking animation. I've seen the really good one with the green grass and the star shape, but it doesn't work in Firefox. I did find a stackoverflow topic where the author found the Attr Plugin worked with changing <rect> properties! I've got a couple examples up on Codepen and wondered if anyone else has thoughts, examples or work arounds for something we do in Flash so easlily. 

 

I'm looking to try and mask an image and reveal it from the center out. clipPath, clip-path and svg are new subjects for me and I found that this works great in 

 

Doesn't work in FF

 

Attr Plug makes it work!

See the Pen bdjoRa by kaplan (@kaplan) on CodePen

 

I have a local version that does some offsetting and has overflow hidden that I'm going to put on Codepen, but it looks jumpy.
 

This is the other forum post: http://greensock.com/forums/topic/11215-svg-masking-with-gsap-animation/

This is the SO post: http://stackoverflow.com/questions/29413359/animated-svg-clipping-path-not-working-in-firefox

See the Pen waxrKe by kaplan (@kaplan) on CodePen

  • Like 1
Link to comment
Share on other sites

Yeah, Firefox has some known issues with SVG masking/clipping which has nothing to do with GSAP and as far as I can tell, there's nothing we can do to work around its bugs and force masking to work consistently across the board. I'm glad you found a workaround in your particular scenario with switching from scaleY transforms to using the height and y attributes. 

 

And yeah, I miss how easy masking was in Flash! It's one of those things that was easy to take for granted. 

  • Like 5
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.
×
×
  • Create New...