SVG动画不能在firefox上运行

Question

I am trying to use this 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 a website but it doesn't seem fully compatible with Firefox browser (on chrome it works perfectly), is there any way I can make it work for all browsers?

I tried to change the javascript calls to the animation libraries, using from instead of fromTo etc, everything works fine in chrome but not in firefox. (or if someone know other similar animation i could use it would be nice too :D). Thanks a lot!

Answer 1

If I had to guess, I'd say it is an issue with the animation library you are using.

In the animation, it is attempting to animate the height of a <rect> element to give that rising fill effect. Note the height 7%->66% transition in the code below.

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

The height of the rectangle is not actually changing while the animation is running. So I suspect it may be a bug or incompatibility in the way the animation library is setting the height during the animation.

Cut down demo: http://codepen.io/anon/pen/Vjadwm

If you get no answers here, I would consider asking Greensock for help, or posting a bug report with them.