Jump to content
GreenSock

celli

SVG Masking with GSAP Animation

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

 

http://prntscr.com/5wq9mr

 

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

post-19026-0-85273400-1422232528_thumb.jpg

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