シェブロンとGreensockのアニメーション

Question

私はGreensockライブラリを使ってシェブロンをアニメーション化しようとしています。私の目標は、に

にすることです：私はCodepen https://www.codepen.io/Brushel/pen/boryZP 上の作業バージョンを持っている

私は山形のIDをターゲットにしていると私はMorphSVG GS機能を使用してそれに接続されている小さなイベントリスナーを持っています。しかし、私はシェブロンを使用して、ボトムポイントからアニメートし、ゆっくりアニメーション化したいと考えています。今すぐクリックでSVG座標を変更するだけです。

var chevron = document.getElementById("chevron"); 
 

 
chevron.addEventListener('click', function(){ 
 
    TweenLite.to("#chevron", 0.08, { 
 
    morphSVG: "100,72.6 173.6,157.4 200,157.4 100,42.2 0,157.4 26.4,157.4" 
 
    }); 
 
});

.container { 
 
    max-width: 800px; 
 
    margin: 0 auto; 
 
} 
 

 
.st0{ 
 
    fill:#000; 
 
} 
 

 
#chevron { 
 
    transform: scale(.2); 
 
}

<div class="container"> 
 
<svg class="mo-icon__svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
\t viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve"> 
 
    <g id="icon_x5F_chevron"> 
 
    <polygon class="st0" id="chevron" points="100,126.97715 26.4165,42.19543 0,42.19543 100,157.41371 200,42.19543 173.5835,42.19543 \t "/> 
 
    </g> 
 
    </svg> 
 
    </div>

Answer 1

あなたには、いくつかのブラウザでは、属性を「変換」が、「変換」属性がずっとある上優先順位を付けているCSSを適用される変換していたように見えます：ここでは

コードですブラウザ間でより一貫性があります。それがGSAPがそれを使用する理由です。したがって、あなたの例では、CSSトランスフォームが属性に適用されているものを覆い隠してしまったという矛盾がありました。

トランスフォーム関連の値は、ブラウザ間の互換性を保証するために、常にGSAP経由で直接設定する必要があります。

TweenLite.set("#chevron", {scale:0.2}); 

ここも形状がモーフィング方法を変更するSHAPEINDEXを使用して改訂codepenだ - あなたが探していたものということでしょうか？ https://codepen.io/GreenSock/pen/3bf8c2aec6c2171d158bdf13bff33525/