ScrollMagic with SVG triggers on Firefox #618

Open
Leobaillard opened this Issue Nov 14, 2016 · 0 comments

Projects

None yet

1 participant

@Leobaillard

Hi!

I'm creating an animated page based on an SVG image. Some SVG objects are set to appear using GSAP and ScrollMagic upon reaching certain SVG elements (triggers).

It works fine in Edge, Chrome and Safari, but for some reason, the same code doesn't work in Firefox (v49, Linux). All the triggers are overlapping, thus triggering them at the same time.

When using addIndicators(), it becomes obvious:
Triggers correctly set on Chrome | Triggers overlapping on Firefox.

Here is a piece of code corresponding to plane objects appearing:

    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);
        });
    },

As I don't own the SVG graphics, I can't easily set up a Codepen, but you can see the web page here: http://hehgroup.dev.8oclock.fr

Thanks for any pointers you might think of!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment