Jump to content
GreenSock

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

Suffering with SVG Masks

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,

 

Adam 

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

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