SVG Reveal ?

[Lynx]

I have a question about what GSAP can and cannot do with SVG.  This is a SVG file with a mask.

 

Can GSAP make the colors in the shape transparent and reveal only when the mask begins to come within the SVG graphic region.  In other words, the SVG file is transparent, the mask is position above the graphic, as the mask begins to literally overlap the SVG graphic, the SVG graphic begins to reveal its self, until the complete graphic is revealed ?

[PointC]

Yep - you can mask an SVG group and move the mask over it. GSAP isn't making the colors in the shape transparent - the mask is just hiding and revealing the underlying group in the SVG.

 

Here is the world's simplest SVG mask demo to show you how it works.

See the Pen KzmXYK by PointC (@PointC) on CodePen

 

Happy masking.

[Lynx]

Can you add noise to the mask with GSAP ?

[OSUblake]

You can add filters to your mask. Check out some these filters...

https://css-tricks.com/squigglevision-in-css-and-svg/

[Lynx]

Yep - you can mask an SVG group and move the mask over it. GSAP isn't making the colors in the shape transparent - the mask is just hiding and revealing the underlying group in the SVG.

 

Here is the world's simplest SVG mask demo to show you how it works.

See the Pen KzmXYK by PointC (@PointC) on CodePen

 

Happy masking.

How about controlling the mask based on the scrolling or swiping speed ?

[PointC]

I think the answer to most of your "Is this possible?" questions is going to be yes. GreenSock is capable of quite a bit and with some creative coding you can achieve just about anything you can imagine. Have you tried some of these mask animations? The best way to learn is to just start trying some of these things you're asking about.

 

If you have a specific GSAP related problem with a project right now, a reduced case CodePen demo would be most helpful in getting answers for you. Please follow this link to see about creating one.

 

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Thanks.

[OSUblake]

Ah finally! I've been wondering when Lynx was going to start hitting you up with his wild imagination.

 

I was actually wondering when Lynx was going to show up again because I saw this post the other day over at the html5gamedevs forum and it reminded me of him. 

http://www.html5gamedevs.com/topic/20010-texture-follow-curving-path/?do=findComment&comment=113820

 

It links to his question about coiling up an SVG image, which at the time seemed pretty crazy, but lots of really useful stuff came from that experiment.

http://greensock.com/forums/topic/12113-coil-up-a-svg-graphic/