Using ScrollReveal to animate in parts of SVG

I'm using the ScrollReveal library to animate in sections of my site.

I have a pretty complex vector which contains five groups. I'm trying to animate these five groups in separately using this library.

Here is my approach currently:

My SVG is a bit lengthy and Stack has a body count character limit, so I created a demo using JSFiddle here.

Each group has a class and as you can see from the demo, it initially loads, then disappears. None of the reveal effects are working? I have other divs with the same parameters which work, but it doesn't work with this SVG for some reason?

If we inspect the white space, I can see that the parts are not appearing because the opacity is 0. But, on scroll, this opacity isn't changing and I don't want to force opacity to 1 via CSS as this I want the part to fade in nicely, whereas setting it to 1 will just make it a static image.

from Using ScrollReveal to animate in parts of SVG