Animating SVG polygon

[boldcolin]

I've created a 3D bar in illustrator (see codepen). Now I want to animate it with TweenMax (or TimelineMax) as if it's building up from the bottom to the top. 

 

I tried a couple of things to make this happen, but without any luck.

 

- Created a clipping-path and then try to change the Y coordinate of the 3 polygons (or wrapped them in a <g id="bars"></g>)

- Tried to animate the points of the polygon (http://greensock.com/forums/topic/8565-animating-svg-polygon-points-using-attrplugin/)

 

I hope someone can help me with this.

 

 

This is the end result what I need to create > http://postimg.org/image/pg2drnvch/

See the Pen rOPPgP by boldcolin (@boldcolin) on CodePen

[Carl]

Hi and welcome to the GreenSock forums,

 

Being that Chris Gannon's excellent Knockout Mask tutorial is fresh in my head I tried a mask and it seems to work great:

 

http://codepen.io/GreenSock/pen/gaqyyV?editors=100

 

Tested in 

Mac: Safari, Chrome, FireFox

PC: IE10, Chrome, FireFox

 

 

Video Tutorial From Chris Gannon

[boldcolin]

The solution: do not use polygon as clipping-path. Just use a <path>. 

[Jonathan]

To add to Carls great advice and to give my two cents,

 

Here is an example of using GSAP to animate an image tag with a SVG clip-path mask. It uses a CSS clip-path property assigned to a image tag.  And with that CSS clip-path references an SVG tag, to simulate a mask effect. Then you just animate the mask and image with GSAP

 

See the Pen LpVrPL by jonathan (@jonathan) on CodePen

 

At first it can be confusing but a CSS clip-path is actually pretty easy once you get the basics down.

 

Create an image with a class or id, and then add an SVG tag with a width and height attribute of zero.

<div id="clip-path-mask-wrapper">

   <img class="clip-svg" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/56901/dog_1_small.jpg">
   
   <svg width="0" height="0">
      <defs>
         <clipPath id="my-clip">
            <circle cx="100" cy="100" r="40" />
            <circle cx="60" cy="60" r="50" />
         </clipPath>
      </defs>
    </svg>

</div>

And then with your CSS you apply the CSS clip-path property to your <img> tags class .clip-svg

.clip-svg {
    clip-path: url(#my-clip);
}

Just be advised that the CSS clip-path property is only good cross browser for simple shapes like SVG circle or rect. But polygons are still buggy cross browser.

 

So in that case like Carl advised above, a SVG mask might be a better option.

 

And this is animating a SVG mask tag with an img tag, with the GSAP AttrPlugin.. nothing fancy shmancy like above

 

See the Pen OyarJK by jonathan (@jonathan) on CodePen

 

So i think using a SVG mask or even a SVG clipping path which could be polygon would be your best bet. But there many ways to do what your after it just depends on the assets you choose to use, whether images or SVG or a mix of both.

 

Again these are just showing the technique of using SVG mask and a mix of CSS clip-path and SVG clip path. But you would have to decide how you will the above techniques or approaches in your own project.