ScrollTrigger above the fold

[decemberly]

I have a number of sections with a ScrollTrigger and fromTo animation that changes the background-color from red to blue during scroll (scrub).

The first section is located at the top of the viewport and starts with a purple color instead of red like the others below, as expected.

Is it possible to let the user see the animation from red to purple (before scrolling) on the sections that starts fully or partially visible?

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

[mvaneijgen]

I'm not completely sure what it is you're asking, but are you looking for clamp? 

 

 

 

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

[decemberly]

Thank you for answering. But no, sorry for being vague.

The section already in viewport on page load has a different starting point, it is purple instead of red.
I would like a visible animation from red to that starting point as soon as it has loaded, before the user starts scrolling.

 

So that it starts out red, then takes a second to animate to the right purple, and when the user starts scrolling the background turns to blue as usual.
 

[mvaneijgen]

I think you'll then have to make a separate ScrollTrigger for the first one, or at least check if it's the first one and then set it scrub: false. But you state you also want it to take a second, so creating a whole separate tween without even ScrollTrigger for the first one will be the way to go. I think. 

[decemberly]

Ok, I was hoping there was a way to do it without separate tweens.

Thank you!

[mvaneijgen]

You don't need a separate tween, but you'll need to do a lot of JS logic to get it to work like you intend.  Where a separate tween is much simpler. 

 

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