SVG анимация не работает на светлячок

Question

Я пытаюсь использовать эту анимацию

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 браузером (на хроме он прекрасно работает), есть ли способ заставить его работать для всех браузеров?

Я попытался изменить вызовы javascript в библиотеках анимации, используя from вместо fromTo и т. Д., Все работает отлично в хроме, но не в 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 за помощью, или отправляя сообщение об ошибке с ними.