Jump to content


SVG Masking with GSAP Animation

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



I am experimenting with masking techniques and GSAP to move the mask.


I seem to have a pretty good way to use SVG to mask an image and GSAP will animate the mask -- but it seems that I am having trouble with a few things working. If you look at the code pen, I have the Transform Origin set to the center of the star, but it still seems to animate from an off-center position. I also tried adding the transformOrigin: "center center" property to my timeline, but that doesn't seem to take effect either. Is there a way to get the transform origin to work with this ?


Another thing I noticed is that my SVG text doesn't seem to animate with GSAP, Is there a way to get that to work ? You can see this in the codepen as well.

See the Pen zxzaaj by MAW (@MAW) on CodePen

Link to comment
Share on other sites

You just need to move the transform-origin into the css object: 

See the Pen gbRvRV by anon (@anon) on CodePen


and the value should be 50% 50%.

  • Like 4
Link to comment
Share on other sites

And as far as the text not animating, it actually is moving, but looking in Chrome the masking effect isn't updated.


Take a look at this screenshot from Chrome's dev tools.




You can see the outline of where the SVG is after the transformations and you can see in the SVG node that the text has a transformMatrix applied from GSAP. Give that tween a 10 second long duration, and you can see the values changing in Dev Tools.


Appears to be a browser bug.

  • Like 2
Link to comment
Share on other sites

Thanks anthonygreco and Carl !


I moved the transformOrigin inside of the CSS and it worked! But two things seem to still be of question:

1. Shouldn't this center the object around it's origin at the center: TweenLite.set("#star", {xPercent:-50, yPercent:-50}); It didn't seem to take effect

2. It looks like the star is rotating from the center, but the scale is still shifting a bit off to the right, it's not exactly centering the effect -- any idea why this might be happening ?

Link to comment
Share on other sites

Hi celli  :)


1- try this : TweenLite.set("#star", {xPercent:"-50%", yPercent:"-50%"});


2 - that correctly scaled from center , pls chek this out : 

See the Pen zxzaaj by MAW (@MAW) on CodePen


and this's why that doesn't rotate from center ( star svg getBBox ) :


  • Like 3
Link to comment
Share on other sites

Thanks Diaco.AW!

Link to comment
Share on other sites

  • 4 months later...

Does anyone have an example of referencing an external .svg file as a mask? 

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.