Colouring background on scroll

[gregor]

Hi, I have a problem with colouring my background.

First the header should change its colour from blue to white, later in the page when a component scrolls in the page should become black, but on leave turn back to white. But in my case it is gets blue again. I thought using toggleActions would be the best option. but it doesn't work because the page turns blue again instead of white...
 

 

 

See the Pen JjzpKOW?editors=1010 by destroy90210 (@destroy90210) on CodePen

[mvaneijgen]

GSAP is highly optimised, so instead of figuring out what color it should change to or from it will record all the values on page load! It thus sees that it could animate from blue (the initial color) to black. Because it are two separate tweens they don't have any interaction together, so they don't know what they are doing. 

 

This could be fixed in so many ways, but in this case a immediateRender: false, on the second tween is the easiest.

 

other ways would be to set a .fromTo() from white to black, or create a timeline with all the animations and then add labels to the timeline and tell ScrollTrigger to animate to label "white" and label "black". Hope it helps and happy tweening! 

 

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

[gregor]

thanks works perfect