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.

Thank you for the quick response, Cassie. Unfortunately the svg has to be 100% width (at least, on start of the animation). https://codepen.io/Chrisothemis/pen/oNyagop 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.

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.