Pinned element with overlap

[crat]

Hello,

I want to start off by thanking you all for creating such an amazing tool like GSAP.
I'm still learning and could really use your help with this component I've setup in codepen.
Here is what I want to achieve:

• after images have formed into a column, they should all scroll up until the last image is fully visible
• then .phone (from the .pink section) should start sliding up over each image
• by the time .phone has reached the vertical center of the viewport, the first image will be under the .phone. The images and phone should have the same width so that images can't "peek" from undeneath .phone
• then .pink will be fully into view, (sliding up from the bottom) and change background-color

Since the images and .phone element aren't exactly fixed width and height, I find it a bit tricky to achieve, especially when the parent is pinned so that the user can see all of the animations unfold. 

See the Pen PoaPMQv by Chrisothemis (@Chrisothemis) on CodePen

[Cassie]

Hey there!

 

Thanks for the kind words. So this is definitely a tricky one. I'm just weighing in because questions like this can sometimes be left for a while before they're answered. Lists of requirements can be a little intimidating.

One thing that I can point out which may help is that your SVG viewbox is 1710 SVG units high

 

That's going to remain the same no matter the size of your screen, if I were you I'd lean into that, set up my SVG so that it's always 100vh - then you know 100vh is equal to 1710 units.

Maybe that's a start?

See the Pen ZERMGbv?editors=0110 by GreenSock (@GreenSock) on CodePen

[crat]

Thank you for the quick response, Cassie. Unfortunately the svg has to be 100% width (at least, on start of the animation).

 

See the Pen oNyagop by Chrisothemis (@Chrisothemis) on CodePen

 

In this codepen, we're animating from svg max-width: 100vw and left offset ( to keep it centred ), to max-width 1100px and recalculate the left offset as we want the images to shrink and stay centred. It calculates the values correctly until you resize. We used .kill() and re-initialise as workaround, but we're hoping for a better solution.

To reproduce the issue please load page at 1300px window width, scroll down, then resize to 1500px and scroll back to the top.

[Cassie]

Sorry, I'm not following here? Why are you doing this instead of scaling it down with a transform? What's the problem you're trying to solve? Could you give me a bit more information about the problem rather that the attempted solution?

Thanks!

 

[crat]

In the second coden, I’m using max-width because I want to shrink down the images to exactly 275px max-width ( 4*275=1100px ). I'm not sure I can make it as precise with scaling. 

So, if you load the page (at 1300px width) scroll all the way down, resize to 1500px and scroll back up, you will see that the svg snaps to full width, rather than transitioning nicely. 
I know this can be fixed with .kill() and re-initialise  but I wanted to know if there is an easier way and why does the element jerk back to 100% on resize?

Thank you for your patience.

[Cassie]

Hey again, let's step back a little.
https://en.wikipedia.org/wiki/XY_problem

So the main problem you're trying to solve is to make sure that the images and the phone are the same width? Correct?

Could you maybe show with some drawings or visuals how the 'phone' is meant to slide over the images? It feels like there's likely a much simpler solution to this. Possibly just keeping everything in one SVG? Could you help me understand what the original aim is, what the animation you're after looks like?