Scale image on scroll, scroll in text as soon as the image reaches 100vw but keep image sticky

[ppalfinger]

Hi, I'm trying to create a section with an image and a text container.

The image should be scaled .6 and should scale up to 1 (100vw) when scrolling.

As soon as the image reaches 100vw, the text should come up by scrolling further while the image stays sticky in the same position.

When the bottom of the text-container reaches about 5vw of the bottom of the viewport, everything should continue scrolling as usual.

Anybody who could help me with this?

See the Pen bGOoORK by Patrick-Palfinger (@Patrick-Palfinger) on CodePen

[SteveS]

I believe this is what you are looking for:

See the Pen XWoeGXE by StevenStavrakis (@StevenStavrakis) on CodePen

It's not the prettiest solution, but it definitely works.
You can read more from this thread:

To roughly describe:

1. We create our image section
2. We create a spacer element
3. We make our scrolltrigger such that it scrubs for twice as many pixels as our viewport is tall
4. We make our animation so that half of it is the image scaling and the other half does nothing
5. We set pinSpacing to false

 

When we start scrolling:

1. The image section pins at the top and loses all its height because we didn't put a pin spacer
2. We scroll 100vh, during which our image grows, and our spacer gets moved up the page
3. After the spacer has completely scrolled, we will be halfway through our scrub, and therefore halfway through our animation
4. The second half of the animation is empty, so the section remains pinned as our text comes into view
5. Once the text section is completely within view, we reach 200% of our image section and the pin releases

 

I think this should be the solution you are looking for. @Rodrigo and @Cassie came up with solutions for the original thread, so either might be able to provide more input. I think it would be interesting if instead of making a spacer element we could customize the pin-spacer, but that's not currently possible as I understand.

[SteveS]

To add on, there are more than a few ways to achieve this. Another would be to have both the image and text sections in a larger div and create a timeline that animates the image in, then animates the text up. This would only require one pin and no empty tweens or spacers.

A truly ideal solution would not require any extra HTML to be written. I think Cassie's example in the mentioned thread can achieve that, but it didn't work instantly for me so I moved to the other method.

[ppalfinger]

@SteveS Thank you very much for your help, with the help of your code example I managed to get mine to work

If you have the time, could you check my current version if it would be possible to make the "end" property depending to the height of the text container? Because the text container could probably be more or less than 50vh. Also, would it be possible to start the scrolling up of the text a little bit earlier?
Here is the link to the dev project: https://p645224.mittwaldserver.info/leistungen/planung/

[SteveS]

I think if you want to implement it with more specific animations, my last reply is the best course of action since it will give you granular control over how scrolling moves your elements.