GSAP / TimelineMax SVG Animation of 3D Bar (3 polygons) - animation

Question

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.
This is the end result what I need to create:
http://postimg.org/image/pg2drnvch/
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 >< /g >)
Tried to animate the points of the polygon (http://greensock.com...ing-attrplugin/)
I hope someone can help me with this.
Codepen URL: http://codepen.io/boldcolin/pen/rOPPgP
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="bar_1_" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="140.5px" height="366.7px" viewBox="0 0 140.5 366.7" style="enable-background:new 0 0 140.5 366.7;" xml:space="preserve"
>
<style type="text/css">
.st0{clip-path:url(#SVGID_2_);fill:#8BBE3F;}
.st1{clip-path:url(#SVGID_2_);fill:#81A83F;}
.st2{clip-path:url(#SVGID_2_);fill:#A1C63C;}
</style>
<g>
<defs>
<polygon id="SVGID_1_" points="80.3,0 0,40.1 0,336.7 60.2,366.7 140.5,327.1 140.5,30.7 "/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" style="overflow:visible;"/>
</clipPath>
<polygon class="st0" points="140.7,169.4 0.2,178.9 0.2,350.2 60.4,380.1 140.7,340.6 "/>
<polyline class="st1" points="60.4,380.1 60.4,205.9 0.2,178.9 0.2,350.2 "/>
<polygon class="st2" points="0.2,178.9 80.5,138.7 140.7,169.4 60.4,209 "/>
</g>
This is an example: http://boldinteractive.nl/raet/bar/
Here I used a white layer on top of the bar which acts like a faux mask. But this is not how I want to make this work..

Answer 1

It's seems impossible to mask a polygon with a polygon and then animate the shape. I'm now using a path (in Illustrator use 'make compound path') and then use this as clipping mask.