Using ScrollReveal with SVG elements not working in Firefox

[jrdnbwmn]

Firefox isn't working for me for some reason. The animated elements just never show up.

Everything else is working great, it's just Firefox with the problem. I have the mockingbird branch installed so I can get rid of mobile animations. I tested with the regular branch and had the same problem with Firefox.

It's weird because I know http://scrollrevealjs.org/ works on Firefox.

I have the plugin installed at the bottom of body and this:

var config = {
  viewportFactor: 1,
  enter: 'bottom',
  over: '.8s',
  move: '0px',
  mobile: false
};

window.scrollReveal = new scrollReveal( config );

and the only parameters I use are after ones like data-scroll-reveal="after 0.3s".

Here's the site: http://www.jrdnbwmn.com/

[jlmakes]

@jrdnbwmn Any updates?

Please note, the latest mockingbird branch (as of 9/1/14) is a little jumbled at the moment, in preparation for the upcoming 0.2.0 release. You might try using 0.1.3 and referencing #32

[jrdnbwmn]

No changes yet. When I updated to the latest mockingbird branch it stopped working altogether. But I'll try 0.1.3 and #32 and let you know!

[jlmakes]

@jrdnbwmn Try the latest mockingbird branch — I pushed some updates yesterday. Make sure you use data-sr as your primary attribute, NOT data-scroll-reveal 🍻

[jrdnbwmn]

@julianlloyd Tried all of that and had no changes, but I've isolated the problem! The images I'm trying to animate are inline svgs. So, couple things:

• Animating these inline svgs works fine in Chrome.
• When I make them regular img tags, the animations work in Firefox.
• I don't have any other problems with inline svgs in Firefox – they show up and work just like Chrome.

So the combo of this version of the js with inline svgs makes Firefox pissy for some reason.

[jlmakes]

@jrdnbwmn Great discovery! Thanks.

I wonder if inline SVG works has a FireFox bug with CSS transforms? Going to close and icebox for now, but I’ll make sure to add this to the README for 0.2.0.