Set top relative to another object

[SWALKER]

I have a header on a page, with content on the left, image on the right and a 'cover' that slides left to reveal the image on page load. When you scroll down about half way, the content moves off screen. That parts works well and can be seen on the code pen.

 

The issue I am facing is that the header is 100vh on large screens (where the departure animation works perfectly),  but on smaller devices, I have to cap the height of the header as the image becomes to tall and skinny.

The images I am using are not very flexible and as a result, I have had to write a lot of media queries,  capping at different heights based on the viewport width.

This part isn't in the codepen, I couldn't replicate it....

UPDATE - I have managed to replicate the issue at 1500px or below 

....but when I cap the height, say on ipad, the 'section-2' is already too far up the screen, and past the 'start' point, and therefore the departure animation has already been triggered. As a result, the content is already half off the screen on ipad on page load and for other various smaller widths.

I am trying to work out if there is a way that I can trigger the departure animation when .section-2, is halfway up '.standard-page-header' (bearing in mind, that .standard-page-header has a fixed position).

Alternatively, trigger the departure when '.section-2' has scrolled half the total distance from it's display/relative position to the top, I'm not sure what is easier.

I have been reading the docs and tried a few things but I can't work it out.

The other issue I have (which I should perhaps ask in another thread) is the sliding cover changes width at various viewport widths. So for example, on large screens, it moves further left to display more image, but on smaller screens, less image, more room for the content.  The problem is this (and the text that slides in) doesn't consistently adjust responsively, so sometimes, when I change widths, it's still covering too much or too less of the screen. 

I tried adding 'invalidateOnRefresh: true' in the 'matchmedia' part,  but I get a console error saying it's not valid.

Any help would be amazing, or even a point in the right direction (docs, examples)

Thanks!

UPDATE - I have managed to replicate the issue at 1500px or below 

See the Pen OJrRzKQ by shereewalker (@shereewalker) on CodePen

[Rodrigo]

Hi,

 

I'm not sure I totally follow what's going on on your example, but I think you're looking for the clamp feature ScrollTrigger has for the start and end points. @Cassie made a great video explaining how it works:

Here is a demo:

See the Pen oNadjoa by GreenSock (@GreenSock) on CodePen

 

Here is a fork of your codepen:

See the Pen ZEVLrrZ by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!