SVGアニメーションは、Firefox

Question

に取り組んでいない（Chromeで、それは完璧に動作します）私はこのアニメにウェブサイトで

http://codepen.io/dbj/full/epXEyd

var tl = new TimelineLite; 
tl.staggerFromTo(".bottom", 0.8, {alpha: 0}, {alpha: 1, fill: "#d6d6d6", delay: 1}, 0.25) 
tl.fromTo("#rectangle", 5, {fill:"#d6d6d6", alpha: "0%", height: "7%"}, {fill: "#c8db2d", alpha: "100%", height: "65%", ease: Power3.easeInOut}, "-=1") 
tl.staggerFromTo(".ray", 1, {alpha: 0}, {alpha: 1, fill: "#cee325"}, 0.02, "-=1.25") 

を使用しようとしていますが、それはFirefoxブラウザと完全に互換性は思えません、私はそれをすべてのブラウザで動作させることができる方法はありますか？

fromToの代わりにfromを使用してアニメーションライブラリへのjavascript呼び出しを変更しようとしましたが、すべてがChromeでうまく動作しますが、Firefoxでは動作しません。 （もし誰かが他の似たようなアニメーションを知っていれば、私はそれを使うこともできます：D）。 ありがとう！

Answer 1

私が推測しなければならないのは、使用しているアニメーションライブラリの問題だと言えます。

アニメーションでは、その上昇効果を得るために、<rect>要素の高さをアニメートしようとしています。以下のコードでは、高さ7％→66％の遷移に注目してください。

.fromTo("#rectangle", 7, {fill:"#000", alpha: "0%", height: "7%"}, {fill: "#f5e317", alpha: "100%", height: "66%", ease: Power3.easeInOut}, "-=1") 

アニメーションの実行中は、矩形の高さは実際には変化しません。だから私はアニメーションライブラリがアニメーション中に高さを設定している方法でバグや非互換性があると思われます。

ダウンカットデモ：あなたがここには答えを得るしない場合http://codepen.io/anon/pen/Vjadwm

が、私が助けをGreensockを求め、またはそれらのバグレポートを投稿し検討します。