headlessNode

@mvaneijgen Thank you so much for your help. The cause of the issue of was my use of flex-box property for the hero container. Which creates containers for its child elements and then it causes that issue of the heights. And your use of Grid having only one column and row stacks the children of the grid on top of each other, and then by using .from in the tween, we push the image element down and have it animated back to the original position.

@mvaneijgen thanks for your reply. If you notice in the example website, only the hero section(heading text and the image) is pinned. The animation below is separate from the hero. The white space created is not the margin that the ScrollTrigger creates the white space in the hero section is being created due to the transform on the image. In the codePen: https://codepen.io/headlessNode/pen/vYMEzxw You see, I've added another animation at the end to reduce the height of the hero. It works as I expect but when the animation completes the height reverts back to the original.

Hello everyone, I'm currently learning ScrollTrigger to replicate thescroll animation showcased on: https://olio-midnight.framer.website/ The one where the image transitions over the title while the title subtly scales down. Here's my progress so far on CodePen: https://codepen.io/headlessNode/pen/vYMEzxw While the animation is taking shape, I've encountered an issue with whitespace at the end when manipulating the Y value of the image. I've attempted to adjust the hero's height via ScrollTrigger, but it's resulting in an undesired effect where the height reduces and then reverts to its original state upon animation completion. I could use some guidance on which properties to modify or utilize to achieve the seamless transition seen on the referenced website. Any assistance you can provide would be greatly appreciated. Thank you for your time and expertise.