Jump to content


Suffering with SVG Masks

Go to solution Solved by Jonathan,

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


I'm hoping someone can help me to understand the behaviour I'm experiencing when trying to use svg masks dynamically. The codepen technically works as intended however the only way I can seem to get them to work is using the .fromTo() function and I imagine the .to() and .from() although I haven't tried them specifically. I am however wondering if I can preposition the svg out of it's mask with the mask property remaining intact and the mask remaining in place by using perhaps the .set() function although I can't seem to get that to work. Also using translate transforms doesn't seem to work.  


Any guidance is much appreciated,



See the Pen vLQryj by Adam-Burke (@Adam-Burke) on CodePen

Link to comment
Share on other sites

Hey @adamburkevpa,


I'm not sure I understand the issue. If the codepen works as intended... what's wrong? :P

Could you describe again what you're trying to do please?


Also, did you have a look at the new SVG Gotchas thread? There's quite a bit of advice about masks there :)

  • Like 4
Link to comment
Share on other sites

There is no issue per se. What I mean to say is this was the only way I could figure to move the graphic independent of the mask however I would like to understand why that is. What is greensock doing that I can't seem to emulate in native svg? That thread seems promising and what I was looking for. Thank you. 

  • Like 1
Link to comment
Share on other sites

  • Solution

Hello adamburkevpa, and Welcome to the GreenSock forum!


In GSAP when you want to animate an SVG <mask> you will need to use the GSAP AttrPlugin


Also in your code your changing CSS properties and attributes outside of GSAP. When animating you should either use GSAP or jQuery but not both. That is because when you use jQuery css(), animate(), or attr() methods you will be changing properties and attribute values outside of GSAP, so it will not know or be aware of those outside changes.


Here is an example of using GSAP to animate an SVG <mask>


See the Pen OyarJK by jonathan (@jonathan) on CodePen


You will notice that there are very little lines of code. And that i have one tween i use to animate the mask and another tween to animate the masked element.


It just shows how you could animate only the mask or the element you are masking.. or animate both.


GSAP AttrPlugin Docs: https://greensock.com/docs/#/HTML5/GSAP/Plugins/AttrPlugin/


Note: a common mistake is to forget to wrap attributes in a attr:{} object which is essential for specifying your intent, that the property is an attribute.



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