Jump to content
Search Community

Animating SVG linear fill

chakotay test
Moderator Tag

Go to solution Solved by Carl,

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'm trying to animate fills on SVG paths. I can use Tween to fill the entire paths progressively but I'm looking to animate the filling progressively from an origin and was wondering whether this was even possible with GSAP? In the linked Codepen (), I've been able to fill each pencil in-turn, but the desired effect is to have each pencil filled one-by-one from the bottom upwards, (filling each pencil from white to the full colour from the bottom up as if filling with water) - sort of an equalizer effect.

 

Any help/guidance would be much appreciated!

 

Thanks!

See the Pen RrYxXq by anon (@anon) on CodePen

Link to comment
Share on other sites

Have you tried using masks, and animating them using drawSVG ?

 

Where this is your SVG object
<path mask="url(#mask)" class="" d=""/>

And this is your SVG mask object

<mask id="mask"><line class="" x1="" y1="" /></mask>

And then using GSAP drawSVG to animate the mask shape up... I will try and make a codePen showing that today.

  • Like 2
Link to comment
Share on other sites

Like, celli said, masks seem like a perfect fit here.

 

I did something similar with DrawSVG to reveal a brush stroke: http://codepen.io/GreenSock/pen/YwawOX?editors=0010

 

For inspiration, here are some great "mask" tricks from Chris Gannon

 

http://codepen.io/chrisgannon/pen/xGwybB

 

http://codepen.io/chrisgannon/pen/QbVwNj

 

http://codepen.io/chrisgannon/pen/BNmVxj

 

http://codepen.io/chrisgannon/details/qOgjYR/n (there is a link to a video tutorial in details)

 

http://codepen.io/chrisgannon/pen/bddQEz

 

http://codepen.io/chrisgannon/pen/MwMpBQ

 

http://codepen.io/elrumordelaluz/pen/bVKXvj

 

http://codepen.io/chrisgannon/pen/bdaXMQ

  • Like 5
Link to comment
Share on other sites

Thanks for your help guys, much appreciated.

 

I've had a go but I'm making a bit of a mess of it, I'm getting some weird opacity masking, any chance you could fork my original codepen by way of example? Here's where I got to:  I want it to start filled white and fill with colors.

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