Principles for vertical scrolling through SVG elements so it looks parallax?

I have a real nice scene in SVG consisting of some clouds and a landscape, sort of like this:

Now I would like to work it in React.js and make it so you can scroll vertically through the scene, and it has sort of parallax effects. That is, say you just see this as your viewport initially.

As you scroll down, it reveals more of the vertical scene. BUT, it doesn't just scroll down the image like normal. Let's say the moon stays in view for a few "pages" of scrolling, only very slightly animating up. Then boom you reach a certain point and the moon quickly scrolls out of view and you are in the mountains. It scrolls slowly through the mountains and then boom quickly to the lake. Each time it "scrolls slowly through" something, that is room for some content to be overlaid. However long the content is for each "part" dictates how much slow scrolling there will be through that part of the scene. So even though the moon might be let's say 500px, there might be 3000px worth of content, so it should scroll let's say 200px of the moon SVG while in the moon phase, as it scrolls through 3000px of the content in front. Then it scrolls the remaining 300px plus some more perhaps to get past the moon, and then scrolls slowly through the mountains, with let's say 10000px of content. Etc.

Then, when in the mountains, each layer of the mountains "in the distance" moves slightly slower than the one in front. That sort of stuff.

The question is, how do I divide up the UI components / SVG / code so as to create these effects? Where I'm at now is, I have an SVG which has tons of transform="matrix(...)" all through each element, like this:

<g transform="matrix(1.27408,0,0,1.58885,-245.147,-3069.76)">
  <rect x="-430" y="4419.39" width="3572" height="1846.61" fill="blue" />
</g>

So I need to plug in some values into the 5th and 6th parameter field in the matrix to move things around. I am not sure necessarily what the starting position should be, maybe it starts off with the hardcoded values. Then as the window scroll event occurs, we do some calculations somehow, I don't know how it would work. Where I'm at now in thinking about this is, say you are on the moon and scrolling down.... We somehow capture the height of the moon statically in advance, then say "Moon will take 3000px to scroll through it" sort of thing. Well, "moon will take X amount of content height to scroll through it". So we calculate the content height outside of the SVG "scene" component, and pass into the SVG component the moonHeight / contentHeight + initialOffset, and that is the moon scroll position. Does that sort of make sense?

Then we do that for every element somehow. But now my mind starts to go haywire trying to conceptualize how it all seamlessly/easily fits together. As moon is scrolling, you start to see the tips of the mountain, and they are scrolling slightly too. So it's like, each "layer" of the illustration has a scrollable viewport set of checkpoints or something. Content area and fast/non-content area. I don't know, I am getting lost.

Any help in thinking this through would be greatly appreciated. I am not sure where to go with it yet. How do you configure the initial system so it can allow for content areas and non-content areas to move at different speeds and such, while keeping the rough overall layout of the scene. How much work will this take? What should I do to simplify?

Here is a React.js parallax library I'm checking out for inspiration, but briefly looking through the source code it is not straightforward what is happening yet. Plus, I think that might be pretty different than what I'm trying to do in some non-significant ways.

This seems like an extremely hard problem after thinking about it for some time. You would need to basically manually encode the position at each scroll change somehow, like keyframes. But that in itself seems tedious, error prone, and time consuming. Am I right? If not, I'd love to know.

Maybe what I'll do is divide the illustration into clear content / no content areas, and scroll slowly through the content areas and faster through the non-content (illustration-heavy) areas. That might simplify the problem so it's more easily workable.

from Principles for vertical scrolling through SVG elements so it looks parallax?