SVG Animation nicht funktioniert auf Firefox

Question

Ich versuche, diese Animation

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") 

in einer Website zu verwenden, aber es scheint nicht kompatibel mit Firefox-Browser (auf Chrom es perfekt funktioniert), Gibt es eine Möglichkeit, dass es für alle Browser funktioniert?

Ich habe versucht, die Javascript-Aufrufe zu den Animationsbibliotheken zu ändern, mit from anstelle von fromTo etc, alles funktioniert gut in Chrom, aber nicht in Firefox. (oder wenn jemand andere ähnliche Animationen kennt, die ich verwenden könnte, wäre auch nett: D). Vielen Dank!

Answer 1

Wenn ich raten müsste, würde ich sagen, dass es ein Problem mit der Animationsbibliothek ist, die Sie verwenden.

In der Animation versucht es, die Höhe eines <rect> Elements zu animieren, um diesen steigenden Fülleffekt zu erzielen. Beachten Sie die Höhe 7% -> 66% Übergang im folgenden Code.

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

Die Höhe des Rechtecks ​​ändert sich nicht, während die Animation ausgeführt wird. Daher vermute ich, dass es sich um einen Fehler oder eine Inkompatibilität bei der Einstellung der Höhe der Animationsbibliothek während der Animation handelt.

Geverringert Demo: http://codepen.io/anon/pen/Vjadwm

Wenn Sie keine Antworten hier, würde ich prüfen Greensock um Hilfe zu bitten, oder einen Fehlerbericht mit ihnen zu veröffentlichen.