GSAP ScrollTrigger not working on initial load but works after scrolling through it

[Owen Tam]

I am trying to change the background color of body dynamically using scroll trigger on each section. However, it appears that after refreshing the site (codepen), what happens is that scrolling to the second part (the one with the id of #Codequest) does not trigger the background color change. If I try to scroll back up and down, the mentioned change suddenly works. Is there any reason as to why this is happening and how to fix it?
Thanks!

Edited February 21 by Owen Tam
Outdated link

[mvaneijgen]

Hi @Owen Tam welcome to the forum!

 

GSAP is build for performance, so if you tell it to animate to something, it will setup all kinds of things under the hood, so that it only has to animate and not figure out what to animate when you tell it to. Thus what is happening on page load it will calculate everything it needs to animate and because you tell it to animate the same thing twice it will cause a conflict, you can solve this conflict by telling it not to render everything on page load with immediateRender: false

 

The toggleActions  you set where also conflicting, because you tell the first ScrollTrigger to reverse on leave, but at the same time the other ScrollTrigger was playing, so the toggleActions: "play none none reverse", is what you want. 

 

As a side note: background is a short hand for all kinds of background properties (see https://developer.mozilla.org/en-US/docs/Web/CSS/background). If you know you're only going to animate the background-color it is better to just animate that property eg backgroundColor in GSAP 

 

Hope it helps and happy tweening! 

 

See the Pen ZEmNLKo?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

[Owen Tam]

Thanks a lot! The problem above has been fixed now. However, the reason that I put toggleActions: "play reverse play reverse" initially was that I wanted to revert back to the original background color (black in this case) after leaving the last project container. Is there any way to also allow that or is the only way using ScrollTrigger at the last container (manually?) to revert the body background color?

[Rodrigo]

Hi,

 

This is a simpler way to achieve that IMHO:

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

 

Hopefully this helps

Happy Tweening!

[Owen Tam]

Thanks a lot, Rodrigo! Adding it manually seemed to have done the trick