How to have a ScrollTrigger smoothly continue a page load animation if the page is scrolled before the first animation finishes

[decemberly]

I have a page load animation that animates mask-size from 0 to a certain value. Then a ScrollTrigger that animates from that value to the intended end value.

This works as intended as long as the page isn't scrolled before the page load animation has finished. 

If I scroll before the page load animation has finished, the ScrollTrigger doesn't start until later (or at all if I scroll fast). Any ideas how to get a smooth animation even if I start scrolling immediately?

See the Pen eYaoLNb by decemberly (@decemberly) on CodePen

[Cassie]

Ooh, good question.

This is going into overwrite modes and when animations are rendered. Maybe something like this?

See the Pen RwmOvqE?editors=0010 by GreenSock (@GreenSock) on CodePen

 

These are good related reads

https://gsap.com/resources/conflict/

 

https://gsap.com/resources/immediaterender/

 

[decemberly]

Thank you Cassie! I have tried immediateRender, but I didn't know about overwrite.

I need the ScrollTrigger tween to be fromTo though, so that I can scroll back up to what the page should look like after page load animation has finished. 

It seems to work with fromTo as well:

See the Pen ZENNzRp by decemberly (@decemberly) on CodePen

[Cassie]

Mmmm. No that doesn't work.

When the scrubbed (ScrollTrigger driven) fromTo kicks in midway through the intial tween it will jump to the initial '0' from position, then animate to the final 'to' position.

We can interrupt the intial animation with a 'to' tween because then all we're doing is adjusting the final destination, it picks up from whatever the mask value is and continues from there...

 

This is the closest to a solution I can think of? But maybe I'm missing something. @Carl is an expert on about overwrite modes. 👀

See the Pen QWRRKVZ?editors=0010 by GreenSock (@GreenSock) on CodePen