1PM

Thanks @Rodrigo, You hit the nail right on the head. I calculated the scale from the SVG's viewbox width divided by the size on screen and used that in the trX calculation as well. And then it ended up right where it had to be. And yes, the idea was always to group things that are on the same plane. But in the example, some layers had to be removed, because of the max. allowed size on Codepen. And elements were also still being moved around, so nothing was final yet. But now that the animation works, I can focus on that part of it. Thanks again for the help! - Pascal

Hey folks, For a project, I've been trying to get a background image to move from left to right, as you scroll to the end of the page. The foreground layer has an item in the bottom left corner (as you can see, when you start it) and one in the bottom right corner (which should be where you finish at the end of the page). There are other layers that are further back that should move slower (there's a JS object "speeds" that has covers that). But the foreground has a speed of 1 (= 100%), so that shouldn't affect the speed calculation. The way I see it, the max. translate X should be the screen width minus the image's width. For example: a 1000px screen and a 3000px image should have a translate X of -2000px to get to the end. But when I try that, it just won't work. As you can tell from the Codepen, the bottom right corner is nowhere near in the frame, when you reach the bottom of the screen. In addition: you don't even end in the same end position on different screen sizes. I hope anyone here has any suggestions as to how I might be able to fix this. P.S. The Codepen preview here will be to wide, relative to the height, so the background doesn't even cover the entire page there. But at least you'll see the bottom right corner element I was talking about.