Gsap clip path animation

[AlecV]

I'm having trouble with clip path animations and is a bit confusing to me so I'd like some help with something.

 

I have an SVG in the shape of a rectangle and I want to reveal the rectangle starting from the top and finishing at the bottom of the rectangle in a straight top down motion. 

 

Is this done using clip path? If not how can I do this with GSAP?

 

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo. Would you please provide a very simple CodePen or CodeSandbox that demonstrates your situation?

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[Rodrigo]

Hi,

 

In this thread there is an example that animates an SVG shape in a clip path definition. You can definitely get started with that in order to achieve what you're after:

 

Hopefully that helps. Let us know if you have more questions.

 

Happy Tweening!

[Andy Bui]

Hi, this is a very simple animation using clip-path with svg that you can start with: 

See the Pen XWYoYER by tcb2307 (@tcb2307) on CodePen