Animation 三维条的GSAP/TimelineMax SVG动画（3个多边形）

我在illustrator中创建了一个3D条（请参见代码笔）。现在，我想用TweenMax（或TimelineMax）为它设置动画，就好像它是从下到上构建的一样

这是我需要创建的最终结果：

我尝试了几件事来实现这一点，但没有任何运气

• 创建了一个剪裁路径，然后尝试更改3个多边形的Y坐标（或将它们包裹在一个中）
• 尝试为多边形的点设置动画（）

我希望有人能帮我

代码笔URL:

.st0{clip path:url（#SVGID_2#）；fill:#8BBE3F；}
.st1{剪辑路径：url（#SVGID_2#）；填充：#81A83F；}
.st2{clip path:url（#SVGID_2#）；fill:#A1C63C；}

这是一个例子：

---

在这里，我在吧台顶部使用了一个白色的图层，它就像一个人造面具。但我不想这样做

似乎不可能用多边形遮罩多边形，然后为形状设置动画。我现在使用一个路径（在Illustrator中使用“生成复合路径”），然后将其用作剪辑遮罩。

不确定它是否有用，但您可以查看有关使用

遮罩

元素而不是

的视频教程。剪辑路径

。不完全确定这种技术是否可以应用于您的案例中。

<?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>