TimelineLite（TweenMax）Chromeで動作しない

Question

GreenSock-TweenMaxを使用して、FirefoxとSafariで正常に動作するマスクアニメーションを作成しました。しかし、Chromeにはアニメーション効果はありません（実際にコードが動作しています）。理由を把握できませんでした。

var n = 200; 
 
function buildShield(s) { 
 
    var timeline = new TimelineLite(); 
 
    n = n+s; 
 
    var to = { 
 
    y: n, 
 
// ease: Linear.easeOut 
 
    }; 
 
    var duration = 2; 
 
    timeline.to("#curtain", duration, to, 1); 
 
} 
 

 

 
function increase(n){ 
 
\t buildShield(-40); 
 
} 
 

 

 
function decrease(){ 
 
\t buildShield(20); 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script> 
 
<svg version="1.1" id="mark-shield" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
\t width="286px" height="311px" viewBox="0 0 286 311" enable-background="new 0 0 286 311" xml:space="preserve"> 
 
\t <defs> 
 
\t <mask id="mask"> 
 
\t \t <polygon fill="white" points="143.705,32.138 262.554,73.118 243.826,227.782 143.705,282.861 44.218,228.222 25.821,73.889 "/> 
 
\t </mask> 
 
\t <g id="curtain" style="transform:translateY(260px);"> 
 
\t <rect id="cr-left" x="9.875" y="28.999" fill="#41B3A1" width="134.312" height="263.573"/> 
 
\t <rect id="cr-right"x="144.188" y="28.999" fill="#269D8A" width="138.479" height="263.573"/> 
 
\t </g> 
 
\t </defs> 
 
<polygon fill="#D7D5D3" stroke="#A9A7A5" stroke-width="8" stroke-miterlimit="10" points="143.641,15.249 278.5,61.75 
 
\t 257.25,237.25 143.641,299.75 30.75,237.75 9.875,62.625 "/> 
 
\t <polygon fill="#c9c9c9" points="143.705,32.138 143.705,282.861 243.826,227.782 262.554,73.118 "/> 
 
\t <use mask="url(#mask)" xlink:href="#curtain"/> 
 
</svg> 
 
<div id="btn-in" onClick="increase(100)" style="background: grey; cursor:pointer;">increase 100</div> 
 
<div id="btn-de" onClick="decrease()" style="background: grey; cursor:pointer; margin-top:10px;">decrease 60</div>

Answer 1

あなたがSVG <defs>要素内にあるSVGグラフィック要素であり、これは#curtainをアニメーション化しようとしているように見えます。

<defs>要素はCSSで直接レンダリングされません。

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs

DEFSに定義された図形要素を直接レンダリングされません。要素を使用して、ビューポート上の任意の場所で要素をレンダリングできます。

GSAPは、デフォルトではCSSPluginを使用していますが、あなたはSVG <defs>要素内の要素をターゲットにするので、あなたはGSAP AttrPluginを使用する必要があります。

属性を直接アニメーション化する必要があります。属性をアニメーション化するには、attr:{}を使用してこれらの属性をラップする必要があります。 GreenSockにこれを報告しないのはなぜattr:{}

var n = 200; 
function buildShield(s) { 
    var timeline = new TimelineLite(); 
    n = n+s; 
    var to = { 
     attr: {y: n}, // wrap y in attr:{} 
    }; 
    var duration = 2; 
    timeline.to("#curtain", duration, to, 1); 
} 

function increase(n){ 
    buildShield(-40); 
} 

function decrease(){ 
    buildShield(20); 
}