Jump to content
GreenSock

Lynx

SVG Reveal ?

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

  • Like 1
Link to comment
Share on other sites

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.

:)

  • Like 5
Link to comment
Share on other sites

Can you add noise to the mask with GSAP ?

Link to comment
Share on other sites

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 ?

Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

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. 

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