Jump to content
Search Community

How to reveal any SVG shape something like a mask effect or drawing?

bootstrap007 test
Moderator Tag

Recommended Posts

3 minutes ago, bootstrap007 said:

I thought no need to use/embed all the files (DrawSVGPlugin, MorphSVGPlugin) separately like TweenMax, Timeline etc  in the old version of GSAP. 🙂

Not sure what you're trying to say... If you need access to external plugins like DrawSVG or MorphSVG then you would need to load them separate from GSAP's core. See our installation page for more details.

  • Like 3
Link to comment
Share on other sites

Look in your dev tools console. It says "Invalid property drawSVG set to 0 Missing plugin? gsap.registerPlugin()" which means that DrawSVG is not being loaded. This is because you're loading the v2 version of DrawSVG while you're loading GSAP 3. Make sure the versions are the same (we recommend GSAP 3 along with its syntax - no need for Max/Lite any longer, etc.).

 

I recommend using the GSAP starter pen to start CodePens with GSAP:

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

  • Like 3
Link to comment
Share on other sites

That polygon you're using as a mask isn't gonna work as you expect either. That just has a stroke around the outside of the polygon so it won't reveal the underlying masked path correctly. You'd want an open path for this to work as you'd like.

 

 

  • Like 3
Link to comment
Share on other sites

19 minutes ago, ZachSaucier said:

Look in your dev tools console. It says "Invalid property drawSVG set to 0 Missing plugin? gsap.registerPlugin()" which means that DrawSVG is not being loaded. This is because you're loading the v2 version of DrawSVG while you're loading GSAP 3. Make sure the versions are the same (we recommend GSAP 3 along with its syntax - no need for Max/Lite any longer, etc.).

 

I recommend using the GSAP starter pen to start CodePens with GSAP:

 

 

Hi,

 

I have updated the versions of GSAP and DrawSVG plugins. Also, updated the timeline but still showing some sort of error in the console.

 

 

 

 

 

 

Link to comment
Share on other sites

Please use the "fork" button in the bottom right of CodePen when saving new versions to post to the forums here. That way people in the future looking through the thread will see the same things that we see.

 

6 minutes ago, bootstrap007 said:

still showing some sort of error in the console

There are no errors in the console related to your code. As Craig said, the code is not doing what you want it to do but that's unrelated to any errors that you see.

Link to comment
Share on other sites

6 minutes ago, ZachSaucier said:

Please use the "fork" button in the bottom right of CodePen when saving new versions to post to the forums here. That way people in the future looking through the thread will see the same things that we see.

 

There are no errors in the console related to your code. As Craig said, the code is not doing what you want it to do but that's unrelated to any errors that you see.

Sure, From next time will do the same with Codepen.

 

So how to fix this one? any solutions?

 

 

Link to comment
Share on other sites

On 4/29/2020 at 10:36 PM, PointC said:

Take it one step at a time. First off, try moving the "drawIt" polygon outside of the mask/defs and see if it will animate correctly with the drawSVG plugin. 

 

As you mentioned the animation is not correct as expected. Just something is happening as in the below CodePen

 

 

https://codepen.io/bootstrap007/details/wvKqrob

 

 

 

Link to comment
Share on other sites

1 minute ago, bootstrap007 said:

I think only the stroke is animating but not the fill. Correct? 

Correct! That's exactly what DrawSVG does - animates the stroke. It can't animate the fill. So that means that you should either modify your SVG to only use strokes or use masks/clip paths as Craig first mentioned.

Link to comment
Share on other sites

2 minutes ago, ZachSaucier said:

Correct! That's exactly what DrawSVG does - animates the stroke. It can't animate the fill. So that means that you should either modify your SVG to only use strokes or use masks/clip paths as Craig first mentioned.

masks/clip paths - most of the browsers will support this clip path? Do you have any simple reference for masks/clip paths?

Thanks

 

 

Link to comment
Share on other sites

2 minutes ago, bootstrap007 said:

most of the browsers will support this clip path?

You can look at caniuse for that information. SVG clip paths on SVG content are very well supported though.

 

2 minutes ago, bootstrap007 said:

Do you have any simple reference for masks/clip paths?

We've been trying to tell you that Craig's very first post talks about how to do this with demos. 

  • Like 3
Link to comment
Share on other sites

Keep in mind that you may be able to animate this without a mask. Just a couple lines or maybe a polyline should work. Unless this is just a simplified version and the end result will actually be a more complicated path. Just a thought.

:)

 

  • Like 1
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.
×
×
  • Create New...