Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
emilychews

Animating Filled Paths in a Fashion Similar to DrawSVG

Recommended Posts

Hi,

 

Is it possible to animate a filled path so it effectively draws like the drawSVG plugin does for stroked paths?  Will it be a case of having to learn how to animate SVG coordinates (if this is even possible?).  

I have seen a (somewhat complicated) method on StackOverflow on how to convert a filled path into a stroked path.  Any tips / suggestions on further reading on how to create a 'draw' effect on filled paths would be wonderful (if it is possible to do).

Thanks,

 

Emily.

Link to comment
Share on other sites

Hi @emilychews :)

 

I can think of a few approaches. It really depends a lot on the path you're trying to animate. It might be as simple as a primitive shape used as a mask/clip-path over the top of your filled path. You could animate the size of the path itself via scale/width/height or maybe morph it. In some cases you can use a stroked path over the top of your filled path that will act as a mask. You can then use the drawSVG plugin for that mask to animate on creating the illusion of the filled path being drawn. It just has to be wide enough to cover the filled path.

 

As I mentioned, it really depends on the situation. If you happen to have a demo of what you're doing we may be able to point you to a more detailed solution.

 

Happy tweening.

:)

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