TransformY with ScrollTrigger

[headlessNode]

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:
 

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.

See the Pen vYMEzxw by headlessNode (@headlessNode) on CodePen

[mvaneijgen]

Hi @headlessNode welcome to the forum!

 

You can change the pin element to include the elements you also want to pin. The white space is necessary for ScrollTrigger to do it's thing, so the easiest solution is to make the animation take up the full window height, so the empty space is underneath the fold of the page. If that is not possible you have to include everything you want to show up on animation completion in the animation, this is also what you  example website does, the next content block also animates in when scrolling. 

 

There where a few issue with you setup which I've fixed and explained via some comments in your JS to better explain things, please be sure to read through them! Hope it helps and happy tweening! 

 

See the Pen OJGVJjB?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[headlessNode]

@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:  
 
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.

[mvaneijgen]

I've restructured your layout a bit, so that you don't have the fight the height of the elements. Everything is stacked on top of each other on page load and then with a .from() tween the elements get moved and animated in to place.

 

See the Pen RwOPGZm?editors=0110 by mvaneijgen (@mvaneijgen) on CodePen

 

If you want the border back, you'll have to create an extra element that is not part of the pin and is the window height, which then gets scrolled away or maybe make it part of the animation and have it also move the same distance as the image. 

 

I've also set ease to "none" for all tweens, made them both the same duration, and set the scroll distance to the windowHeight. Be sure to read through the JS comments!

 

See the Pen MWRwjPO?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[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.