Moving bg + ScrollTrigger won't reach end

[1PM]

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.

See the Pen wvZXxVL by Pascal-Maranus (@Pascal-Maranus) on CodePen

[Rodrigo]

Hi @1PM and welcome to the GSAP Forums!

 

I think the problem here are the values you're passing and how they're calculated based on the dimensions they have. I've been looking for a bit at your demo and one of the things I think (emphasis on the I THINK part) is the fact that your SVG has a specific width in pixels based on the screen size and it's parent, but then you have the viewbox in your SVG which creates a whole new coordinates system that doesn't really matches the one outside of it. In that particular case a 100 pixels motion in the DOM is not the same as inside of the SVG. For example I'm looking at this in a 1920x1084 pixels screen so moving something 192 pixels on the X axis is 10% of the screen, right? But your SVG has a viewbox of 9000 units width, 192 units in that frame is only 2.1333% of that, see the problem? On top of that you have to figure a way to move each element (right now you're moving each group of kids individually) a specific amount of units inside the SVG so they become visible in a specific window size (that's why you have different end positions in different screen widths).

 

I think you should start by completely removing ScrollTrigger from this and focus just on getting the animations to work as expected, nothing more. Once the animations do what you want (I strongly recommend you to have everything in a single GSAP Timeline) you can plug in ScrollTrigger back into this.

 

Also I'd recommend you to group all the kids playing in one layer and move that, same with the trees and rocks, it would be far easier to move this elements if they reside in a single group rather than move them one by one.

 

There are a lot of moving parts in this and a lot of things that need to be taking into consideration and that's beyond the scope of what we can do for our users in these free forums. Unfortunately we don't have the time resources to start fiddling with your demo and get it working. Maybe there is a simple way to do this that is eluding me, but SVG is not something I particularly excel at. As I mentioned I'd take it one step at a time and one layer at a time with just a single animation for each layer/group inside a timeline, make sure is responsive and then add ScrollTrigger in order to control everything with the scroll position.

 

Happy Twening!

[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