Jump to content
GreenSock

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

Animating SVG linear fill

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

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

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:

 

http://codepen.io/GreenSock/pen/adaeZd

 

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

  • Like 1
Link to comment
Share on other sites

That's great thanks for all your help guys.

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