Jump to content


Animating SVG linear fill

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!



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/details/qOgjYR/n (there is a link to a video tutorial in details)









  • Like 5
Link to comment
Share on other sites

I LOVE those Pens! Here is one I made using GSAP DrawSVG and animating masks:

See the Pen bExxQy by celli (@celli) on CodePen

  • Like 1
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: 

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

 I want it to start filled white and fill with colors.

Link to comment
Share on other sites

  • Solution

I think for this you can just scale a <rect> that is inside the stroke of the pen.

I just scaled the green-pen to get this:




but again, you don't want to scale the thing with the stroke.

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