ScrollMagic с триггерами SVG в Firefox

Я создаю анимированную страницу на основе изображения SVG. Некоторые объекты SVG настроены на отображение с использованием GSAP и ScrollMagic при достижении определенных элементов SVG (триггеров).

Он отлично работает в Edge, Chrome и Safari, но по какой-то причине тот же код не работает в Firefox (v49, Linux). Все триггеры перекрываются, таким образом, запускают их одновременно.

При использовании addIndicators() это становится очевидным:

Триггеры правильно установлены на ChromeТриггеры, перекрывающиеся в Firefox,

(Chrome слева, Firefox справа)

Вот фрагмент кода, соответствующий появлению плоских объектов:

setupPlanes: function() {
    var _this = this;

    var $planes = $('#planes image');
    $planes.each(function() {
        var displace = -50;
        if (this.id.indexOf('nice') !== -1)
            displace = 50;
        var planeTween = new TimelineMax()
            .from($(this), 2, {xPercent: displace+'%', ease: Power1.easeOut})
            .to($(this), 0.3, {autoAlpha: 1}, 0);
        var trigger = this.id.indexOf('plane-saint-tropez') !== -1 ? '#logo-hrr-a' : '#'+this.id+'-a';
        var planeScene = new ScrollMagic.Scene({triggerElement: trigger, reverse: false})
            .setTween(planeTween)
            .addIndicators({name:trigger})
            .addTo(_this.scrollController);
    });
},

Поскольку я не владею графикой SVG, я не могу легко настроить Codepen, но вы можете увидеть веб-страницу здесь: http://hehgroup.dev.8oclock.fr/

Спасибо за любые указатели, о которых вы могли подумать!

0 ответов

Другие вопросы по тегам